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). ```
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
import { BookIcon } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { ComponentPropsWithoutRef, ElementRef, forwardRef, ReactNode } from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
import { IntegrationDefinition } from '../Landing/Integrations.constants'
|
|
|
|
interface BuiltBySectionProps extends ComponentPropsWithoutRef<'div'> {
|
|
integration: IntegrationDefinition
|
|
status?: string | ReactNode
|
|
}
|
|
|
|
export const BuiltBySection = forwardRef<ElementRef<'div'>, BuiltBySectionProps>(
|
|
({ integration, status, className, ...props }, ref) => {
|
|
const { docsUrl } = integration
|
|
const { name, websiteUrl } = integration?.author ?? {}
|
|
|
|
if (!name && !docsUrl && !websiteUrl) return null
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn('flex flex-wrap items-center gap-8 md:gap-10 px-4 md:px-10', className)}
|
|
{...props}
|
|
>
|
|
{status && (
|
|
<div>
|
|
<div className="text-foreground-lighter font-mono text-xs mb-1">STATUS</div>
|
|
<div>{status}</div>
|
|
</div>
|
|
)}
|
|
{name && (
|
|
<div>
|
|
<div className="text-foreground-lighter font-mono text-xs mb-1">BUILT BY</div>
|
|
<div className="text-foreground-light text-sm">{name}</div>
|
|
</div>
|
|
)}
|
|
{docsUrl && (
|
|
<div>
|
|
<div className="text-foreground-lighter font-mono text-xs mb-1">DOCS</div>
|
|
<Link
|
|
href={docsUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-foreground-light hover:text-foreground text-sm flex items-center gap-2"
|
|
>
|
|
<BookIcon size={16} />
|
|
{docsUrl.includes('supabase.com/docs')
|
|
? 'Supabase Docs'
|
|
: docsUrl.includes('github.com')
|
|
? 'GitHub Docs'
|
|
: 'Documentation'}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
{websiteUrl && (
|
|
<div>
|
|
<div className="text-foreground-lighter font-mono text-xs mb-1">WEBSITE</div>
|
|
<Link
|
|
href={websiteUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="text-foreground-light hover:text-foreground text-sm"
|
|
>
|
|
{websiteUrl.replace('https://', '')}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
BuiltBySection.displayName = 'BuiltBySection'
|