konnosDashboard
ExampleProject.tsx90 lines · main
1// @ts-nocheck
2import { useParams } from 'common'
3import { ChevronRight } from 'lucide-react'
4import { useTheme } from 'next-themes'
5import Link from 'next/link'
6import { cn } from 'ui'
7
8import { useSendEventMutation } from '@/data/telemetry/send-event-mutation'
9import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
10import { BASE_PATH } from '@/lib/constants'
11
12interface ExampleProjectProps {
13 title: string
14 description: string
15 url: string
16 framework?: string
17 iconUrl?: string
18}
19
20export const ExampleProject = ({
21 framework,
22 title,
23 description,
24 url,
25 iconUrl,
26}: ExampleProjectProps) => {
27 const { resolvedTheme } = useTheme()
28 const { ref: projectRef } = useParams()
29 const { data: org } = useSelectedOrganizationQuery()
30
31 const { mutate: sendEvent } = useSendEventMutation()
32 const iconImgSrc = iconUrl
33 ? iconUrl
34 : !!framework
35 ? `${BASE_PATH}/img/libraries/${framework.toLowerCase()}${
36 ['expo', 'nextjs'].includes(framework.toLowerCase())
37 ? resolvedTheme?.includes('dark')
38 ? '-dark'
39 : ''
40 : ''
41 }-icon.svg`
42 : ''
43
44 return (
45 <Link
46 href={url}
47 target="_blank"
48 rel="noreferrer"
49 onClick={() =>
50 sendEvent({
51 action: 'example_project_card_clicked',
52 properties: { cardTitle: title },
53 groups: { project: projectRef ?? 'Unknown', organization: org?.slug ?? 'Unknown' },
54 })
55 }
56 >
57 <div
58 className={cn(
59 'group relative',
60 'border bg-surface-100 border-overlay',
61 'flex h-32 flex-row rounded-md p-4 hover:bg-overlay-hover',
62 'transition duration-150 ease-in-out'
63 )}
64 >
65 <div className="mr-4 flex flex-col">
66 <img
67 className="transition-all group-hover:scale-110"
68 src={iconImgSrc}
69 alt={`${framework} logo`}
70 width={26}
71 height={26}
72 />
73 </div>
74 <div className="w-4/5 space-y-2">
75 <h5 className="text-foreground">{title}</h5>
76 <p className="text-sm text-foreground-light">{description}</p>
77 </div>
78 <div
79 className={cn(
80 'absolute right-4 top-3',
81 'text-foreground-lighter transition-all duration-200',
82 'group-hover:right-3 group-hover:text-foreground'
83 )}
84 >
85 <ChevronRight />
86 </div>
87 </div>
88 </Link>
89 )
90}