mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 15:19:08 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import { ChevronRightIcon } from 'lucide-react'
|
|
import { useTheme } from 'next-themes'
|
|
import Link from 'next/link'
|
|
import { cn } from 'ui'
|
|
|
|
import { BASE_PATH } from '@/lib/constants'
|
|
import { useTrack } from '@/lib/telemetry/track'
|
|
|
|
interface ExampleProjectProps {
|
|
title: string
|
|
description: string
|
|
url: string
|
|
framework?: string
|
|
iconUrl?: string
|
|
}
|
|
|
|
export const ExampleProject = ({
|
|
framework,
|
|
title,
|
|
description,
|
|
url,
|
|
iconUrl,
|
|
}: ExampleProjectProps) => {
|
|
const { resolvedTheme } = useTheme()
|
|
const track = useTrack()
|
|
const iconImgSrc = iconUrl
|
|
? iconUrl
|
|
: !!framework
|
|
? `${BASE_PATH}/img/libraries/${framework.toLowerCase()}${
|
|
['expo', 'nextjs'].includes(framework.toLowerCase())
|
|
? resolvedTheme?.includes('dark')
|
|
? '-dark'
|
|
: ''
|
|
: ''
|
|
}-icon.svg`
|
|
: ''
|
|
|
|
return (
|
|
<Link
|
|
href={url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
onClick={() => track('example_project_card_clicked', { cardTitle: title })}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'group relative',
|
|
'border bg-surface-100 border-overlay',
|
|
'flex h-32 flex-row rounded-md p-4 hover:bg-overlay-hover',
|
|
'transition duration-150 ease-in-out'
|
|
)}
|
|
>
|
|
<div className="mr-4 flex flex-col">
|
|
<img
|
|
className="transition-all group-hover:scale-110"
|
|
src={iconImgSrc}
|
|
alt={`${framework} logo`}
|
|
width={26}
|
|
height={26}
|
|
/>
|
|
</div>
|
|
<div className="w-4/5 space-y-2">
|
|
<h5 className="text-foreground">{title}</h5>
|
|
<p className="text-sm text-foreground-light">{description}</p>
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
'absolute right-4 top-3',
|
|
'text-foreground-lighter transition-all duration-200',
|
|
'group-hover:right-3 group-hover:text-foreground'
|
|
)}
|
|
>
|
|
<ChevronRightIcon />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|