mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 10:55: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>
65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import { BASE_PATH } from 'lib/constants'
|
|
import { useTheme } from 'next-themes'
|
|
import Link from 'next/link'
|
|
import { IconChevronRight } from 'ui'
|
|
|
|
interface ExampleProjectProps {
|
|
framework: string
|
|
title: string
|
|
description: string
|
|
url: string
|
|
}
|
|
|
|
const ExampleProject = ({ framework, title, description, url }: ExampleProjectProps) => {
|
|
const { resolvedTheme } = useTheme()
|
|
|
|
return (
|
|
<Link href={url} target="_blank" rel="noreferrer">
|
|
<div
|
|
className={[
|
|
'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',
|
|
].join(' ')}
|
|
>
|
|
<div className="mr-4 flex flex-col">
|
|
<img
|
|
className="transition-all group-hover:scale-110"
|
|
src={`${BASE_PATH}/img/libraries/${framework.toLowerCase()}${
|
|
['expo', 'nextjs'].includes(framework.toLowerCase())
|
|
? resolvedTheme === 'dark'
|
|
? '-dark'
|
|
: ''
|
|
: ''
|
|
}-icon.svg`}
|
|
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="
|
|
absolute
|
|
right-4
|
|
top-3
|
|
text-foreground-lighter
|
|
transition-all
|
|
duration-200
|
|
group-hover:right-3
|
|
group-hover:text-foreground
|
|
"
|
|
>
|
|
<IconChevronRight />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export default ExampleProject
|