544: filter software on keyword/tag using a link

frontend/components/layout/TagChipFilter.tsx

@@ -0,0 +1,41 @@
+import Chip from '@mui/material/Chip'
+import {softwareUrl} from '~/utils/postgrestUrl'
+import SearchIcon from '@mui/icons-material/Search'
+import Link from 'next/link'
+
+export default function TagChipFilter({label, title}:
+  { label: string, title?: string }) {
+
+  if (!label) return null
+
+  const url = softwareUrl({keywords: [label]})
+  // console.log('url...',url)
+
+  return (
+    <Link
+      href={url}
+      passHref
+    >
+    <Chip
+      title={`Click to filter for ${title ? title.toLowerCase() : label.toLowerCase()}`}
+      label={label}
+      icon={<SearchIcon />}
+      // onDelete={() => {}}
+      clickable
+      sx={{
+        marginBottom: '1rem',
+        marginRight: '0.5rem',
+        maxWidth: '21rem',
+        borderRadius: '0.125rem',
+        textTransform: 'capitalize',
+        '& .MuiChip-icon': {
+          order: 1,
+          margin:'0rem 0.5rem 0rem 0rem',
+          height: '1.125rem',
+          width: '1.125rem'
+        }
+      }}
+    />
+    </Link>
+  )
+}

frontend/components/software/SoftwareKeywords.tsx

@@ -5,7 +5,7 @@
 
 import LocalOfferIcon from '@mui/icons-material/LocalOffer'
 import {KeywordForSoftware} from '../../types/SoftwareTypes'
-import TagChip from '~/components/layout/TagChip'
+import TagChipFilter from '../layout/TagChipFilter'
 
 export default function SoftwareKeywords({keywords = []}: { keywords: KeywordForSoftware[] }) {
 
@@ -18,7 +18,7 @@ export default function SoftwareKeywords({keywords = []}: { keywords: KeywordFor
     return (
       <div className="flex flex-wrap py-1">
         {keywords.map((item, pos) => {
-          return <TagChip key={pos} label={item.keyword}/>
+          return <TagChipFilter key={pos} label={item.keyword} />
         })}
       </div>
     )