template-web3-app/app/(general)/integration/sismo/sidebar.tsx at 8c276a1b13d96b3cc7d3a2dc80449fc29d4c92b1 · turbo-eth/template-web3-app · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { turboIntegrations } from "@/data/turbo-integrations"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import { LinkComponent } from "@/components/shared/link-component"
import { ArweaveAccountPreview } from "@/integrations/arweave/components/arweave-account/sidebar-preview"

export const SideBar = () => {
  const pathname = usePathname()

  const sismoBaseUrl = turboIntegrations.sismo.href
  return (
    <aside aria-label="Sidebar" className="w-full sm:w-64">
      <div className="overflow-y-auto bg-background px-3 py-4 text-left sm:h-full">
        <ArweaveAccountPreview />
        <ul className="space-y-2 font-medium">
          <li>
            <Link href={`${sismoBaseUrl}/auth`}>
              <span
                className={cn(
                  "group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:bg-muted hover:text-foreground",
                  pathname === `${sismoBaseUrl}/auth`
                    ? "bg-muted font-medium text-foreground"
                    : "text-muted-foreground"
                )}
              >
                <span>Auth</span>
              </span>
            </Link>
          </li>
          <li>
            <Link href={`${sismoBaseUrl}/claim`}>
              <span
                className={cn(
                  "group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:bg-muted hover:text-foreground",
                  pathname === `${sismoBaseUrl}/claim`
                    ? "bg-muted font-medium text-foreground"
                    : "text-muted-foreground"
                )}
              >
                <span>Claim</span>
              </span>
            </Link>
          </li>
          <li>
            <Link href={`${sismoBaseUrl}/signature`}>
              <span
                className={cn(
                  "group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:bg-muted hover:text-foreground",
                  pathname === `${sismoBaseUrl}/signature`
                    ? "bg-muted font-medium text-foreground"
                    : "text-muted-foreground"
                )}
              >
                <span>Signature</span>
              </span>
            </Link>
          </li>
        </ul>
      </div>
    </aside>
  )
}