mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
b91532f6c7
* migrate some www components to tokens * consolidate InteractiveShimmerCard to Panel component * update tokens in blog * update tokens in careers page * update tokens in customers section * update tokens in open-source section * update tokens in Realtime page * update tokens in Storage and Vector * update tokens in SplitCodeBlockCarousel * update tokens in PGCharts * remove unused css files * update tokens in Card * update tokens in Pricing page * clean up priving page imports * remove hardcoded theme vars * migrate first half of defaultTheme.ts to tokens * migrate second half of defaultTheme.ts to tokens * improve inputs * add foreground to text-light and text-lighter * add foreground to text-light and text-lighter * migrate docs components with styling tokens * migrate docs components with styling tokens * fix broken Repos component * fix broken classes in blog * update tokens on Button and other components * update tokens on IconPanel * update studio main layout base styling tokens * update tokens across studio, docs and www * update tokens across studio, docs and www * update ui/Panel to styling tokens * update ExampleProject and TableEditorMenu tokens * www vector page tokens * update studio UI tokens * update other studio UI tokens * update more studio UI tokens * change tokens here, change tokens there * finish updating colors with tokens variables * add gui sandbox for theme experimentation * use common package for www, docs and studio and fix Command K tokens * provide light mode default tokens options * fix conflict leftover * update loading line * fix className typo * fix prettier * update themeSandbox preset default values * fix text-background0 * prettier * update warningBanner with warning color * switch all border-border with border-default * improve border-secondary and foreground-muted in light mode * force ring color on toggle * fix button bg color and border-muted light token * fix input bg color * fix dark button hover * fix homepage product card * fix code-hike table header colors * button dark border * remove tabIndex leftover from homepage main ctas --------- Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import { Button, Divider, IconArrowUpRight, IconGitHub, IconTriangle, Space } from 'ui'
|
|
import Link from 'next/link'
|
|
import Image from 'next/image'
|
|
|
|
function ExampleCard(props: any) {
|
|
return (
|
|
<>
|
|
<div
|
|
className="bg-surface-100
|
|
border-default
|
|
flex
|
|
h-40
|
|
flex-col
|
|
justify-between rounded rounded-b-none
|
|
border
|
|
border-t border-r border-l p-5
|
|
"
|
|
>
|
|
<div className="mb-4">
|
|
<h4 className="h6">{props.title}</h4>
|
|
<p className="p text-sm">{props.description}</p>
|
|
<div className="flex items-center">
|
|
<div className="relative border border-default inline !w-6 !h-6 rounded-full overflow-hidden">
|
|
<Image
|
|
src={props.author_img}
|
|
alt={props.author + ' GitHub profile picture'}
|
|
layout="fill"
|
|
objectFit="cover"
|
|
/>
|
|
</div>
|
|
<span className="text-foreground ml-2 text-sm">{props.author}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Divider light />
|
|
<div>
|
|
<div
|
|
className="
|
|
bg-surface-200
|
|
border-default flex
|
|
flex-col justify-between rounded rounded-t-none
|
|
border
|
|
border-b border-r border-l
|
|
border-t-0 p-5"
|
|
>
|
|
<Link
|
|
href={props.repo_url}
|
|
as={props.repo_url}
|
|
className="text-foreground-light hover:text-foreground flex flex-row items-center text-sm"
|
|
target="_blank"
|
|
>
|
|
<span>{props.repo_name}</span>
|
|
<span className="ml-1 inline-block">
|
|
<IconGitHub size={14} />
|
|
</span>
|
|
</Link>
|
|
|
|
<div className="mt-3 flex items-stretch gap-2 h-[26px]">
|
|
{props.vercel_deploy_url && (
|
|
<a target="_blank" href={props.vercel_deploy_url}>
|
|
<Image src="https://vercel.com/button" alt="vercel button" width={75} height={26} />
|
|
</a>
|
|
)}
|
|
{props.demo_url && (
|
|
<Button asChild size="tiny" type="default" iconRight={<IconArrowUpRight />}>
|
|
<Link href={props.demo_url} as={props.demo_url} target="_blank" tabIndex={-1}>
|
|
Launch Demo
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
{!props.demo_url && (
|
|
<Button asChild size="tiny" type="default" iconRight={<IconArrowUpRight />}>
|
|
<Link href={props.repo_url} as={props.repo_url} target="_blank" tabIndex={-1}>
|
|
View Code
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ExampleCard
|