display keywords as pills

Author: frodesundby

components/dataproducts/dataproductInfo.tsx

@@ -1,4 +1,3 @@
-import Keyword from '../widgets/Keyword'
 import IconBox from '../lib/icons/iconBox'
 import GithubIcon from '../lib/icons/github'
 import {UrlLink} from '../widgets/UrlLink'
@@ -18,6 +17,7 @@ interface DataproductDetailProps {
 const DataproductInfo = ({product}: DataproductDetailProps) => {
     return (
         <>
+            <table>
             {!!product.keywords.length && (
                 <tr>
                     <td>
@@ -33,6 +33,7 @@ const DataproductInfo = ({product}: DataproductDetailProps) => {
                     </td>
                 </tr>
             )}
+            </table>
             <StyledTable>
                 <tbody>
                 {product.repo && (

components/index/results/searchResult.tsx

@@ -1,13 +1,11 @@
 import Link from 'next/link'
-import {SearchContentQuery} from '../../../lib/schema/graphql'
-import {ArrayElement} from '../../../lib/schema/ArrayElement'
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
 import IconBox from '../../lib/icons/iconBox'
 import BigQueryLogo from '../../lib/icons/bigQueryLogo'
 import * as React from 'react'
 import styled from 'styled-components'
-import KeywordLink from "../../lib/keywordList";
+import {KeywordPill} from "../../lib/keywordList";
 
 const StyledCard = styled(Card)`
   margin: 0 10px 20px;
@@ -27,9 +25,8 @@ export interface SearchResultProps {
 }
 
 export const SearchResultLink = ({link, name, group, keywords}: SearchResultProps) => {
-
     return (
-        <Link href={link}>
+        <Link href={link} passHref={true}>
             <a>
                 <StyledCard>
                     <CardHeader
@@ -44,7 +41,12 @@ export const SearchResultLink = ({link, name, group, keywords}: SearchResultProp
                         subheader={`eier: ${group}`}
                     />
                     <div style={{float: 'right'}}>
-                        {keywords && keywords.map((k, i) => <KeywordLink key={i} keyword={k} compact={true}/>)}
+                        {keywords && keywords.map((k, i) =>
+                            <Link key={i} href={`/search?q=${k}`} passHref={true}>
+                                <a>
+                                    <KeywordPill key={i} keyword={k} compact={true}>{k}</KeywordPill>
+                                </a>
+                            </Link>)}
                     </div>
                 </StyledCard>
             </a>

components/lib/keywordList.tsx

@@ -1,8 +1,11 @@
 import styled from "styled-components";
 import StringToColor from "../../lib/stringToColor";
 
+const {contrastColor} = require('contrast-color');
+
 interface KeywordSpanProps {
     color: string,
+    textColor?: string,
     horizontal?: boolean,
     compact?: boolean,
     onClick?: () => void
@@ -14,8 +17,8 @@ margin: ${(props) => props.compact ? '0 10px' : '0 0 10px 15px'};
 cursor: pointer;
 color: #222;
 :hover {
-  color: ${(props) =>  props.onClick ?'red' :'var(--navds-color-text-link)' } ;
-  text-decoration: ${(props) =>  props.onClick ?'line-through':'underline'} ;
+  color: ${(props) => props.onClick ? 'red' : 'var(--navds-color-text-link)'} ;
+  text-decoration: ${(props) => props.onClick ? 'line-through' : 'underline'} ;
 }
 &:before {
     background-color: ${(props) => props.color};
@@ -27,6 +30,22 @@ color: #222;
     content: '';
 }
 `
+const KeywordPillStyle = styled.span<KeywordSpanProps>`
+display: ${(props) => props.horizontal ? 'block' : 'inline-block'};
+background-color: ${(props) => props.color};
+color: ${(props) => props.textColor};
+border-radius: 999px;
+font-size: 12px;
+padding: 3px 5px 3px 5px;
+border: 0.5px solid transparent;
+
+margin: ${(props) => props.compact ? '0 5px' : '0 0 10px 15px'};
+cursor: pointer;
+:hover {
+  filter: brightness(110%);
+  border: 0.5px solid #f5f5f5;
+}
+`
 
 interface keywordLinkProps {
     keyword: string,
@@ -36,12 +55,20 @@ interface keywordLinkProps {
     onClick?: () => void
 }
 
-const KeywordLink = ({keyword, horizontal, children, compact, onClick}: keywordLinkProps) => {
+export const KeywordLink = ({keyword, horizontal, children, compact, onClick}: keywordLinkProps) => {
     return <KeywordSpan color={StringToColor(keyword)} horizontal={horizontal} compact={compact} onClick={onClick}>
         {children}
     </KeywordSpan>
 
 
+}
+export const KeywordPill = ({keyword, horizontal, children, compact, onClick}: keywordLinkProps) => {
+    const color = StringToColor(keyword)
+    return <KeywordPillStyle color={color} textColor={contrastColor({bgColor: color})} horizontal={horizontal}
+                             compact={compact} onClick={onClick}>
+        {children}
+    </KeywordPillStyle>
+
 }
 
 export default KeywordLink