Make all tags clickable

Whenever a tag is clicked, redirect the user to the dashboard and filter
by the tag.

Solves: #53

web/components/ImageCard.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from 'react'
 
+import { NavLink } from 'react-router-dom'
 import { TagsByName } from '../tags'
 import { formatRelativeTimeTo } from '../time'
 import { Badge } from './Badge'
@@ -80,7 +81,13 @@ export function ImageCard({
         <p className="text-sm mt-2">{description}</p>
         <div className="flex flex-wrap gap-2 mt-4">
           {tags.map((x) => (
-            <Badge key={x} label={x} color={TagsByName[x]?.color} />
+            <NavLink key={x} to={`/?tag=${encodeURIComponent(x)}`}>
+              <Badge
+                label={x}
+                color={TagsByName[x]?.color}
+                className="hover:opacity-90"
+              />
+            </NavLink>
           ))}
         </div>
       </div>

web/pages/ImagePage.tsx

@@ -1,5 +1,5 @@
 import type { JSX, ReactNode } from 'react'
-import { Navigate, useSearchParams } from 'react-router-dom'
+import { Link, NavLink, Navigate, useSearchParams } from 'react-router-dom'
 
 import {
   type Graph,
@@ -222,7 +222,14 @@ export function ImagePage(): JSX.Element {
       {/* Image tags */}
       <div className="flex mt-4 items-center gap-x-2">
         {imageTags.map((x) => (
-          <Badge key={x.name} label={x.name} color={x.color} />
+          <NavLink key={x.name} to={`/?tag=${encodeURIComponent(x.name)}`}>
+            <Badge
+              key={x.name}
+              label={x.name}
+              color={x.color}
+              className="hover:opacity-90"
+            />
+          </NavLink>
         ))}
       </div>
       {/* Links */}