mirror of
https://github.com/supabase/supabase.git
synced 2026-07-03 23:54:20 +08:00
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import { FC } from 'react'
|
|
import { Typography, IconChevronRight } from '@supabase/ui'
|
|
import { useStore } from 'hooks'
|
|
import Link from 'next/link'
|
|
|
|
interface Props {
|
|
framework: string
|
|
title: string
|
|
description: string
|
|
url: string
|
|
}
|
|
|
|
const ExampleProject: FC<Props> = ({ framework, title, description, url }) => {
|
|
const { ui } = useStore()
|
|
const { isDarkTheme } = ui
|
|
|
|
return (
|
|
<Link href={url}>
|
|
<a target="_blank">
|
|
<div
|
|
className={[
|
|
'group relative',
|
|
'bg-panel-header-light dark:bg-panel-header-dark hover:bg-panel-border-light dark:hover:bg-panel-border-dark border',
|
|
'border-panel-border-light dark:border-panel-border-dark hover:border-panel-border-hover-light',
|
|
'dark:hover:border-panel-border-hover-dark rounded-md p-4 flex flex-row h-32 hover:border-gray-300',
|
|
'transition ease-in-out duration-150',
|
|
].join(' ')}
|
|
>
|
|
<div className="flex flex-col mr-4">
|
|
<img
|
|
className="transition-all group-hover:scale-110"
|
|
src={`/img/libraries/${framework.toLowerCase()}${
|
|
framework.toLowerCase() == 'nextjs' ? (isDarkTheme ? '-dark' : '') : ''
|
|
}-icon.svg`}
|
|
alt={`${framework} logo`}
|
|
width={26}
|
|
height={26}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2 w-4/5">
|
|
<h5 className="text-scale-1200">{title}</h5>
|
|
<p className="text-scale-1000 text-sm">{description}</p>
|
|
</div>
|
|
<div
|
|
className="
|
|
absolute
|
|
right-4
|
|
top-3
|
|
text-scale-900
|
|
transition-all
|
|
duration-200
|
|
group-hover:right-3
|
|
group-hover:text-scale-1200
|
|
"
|
|
>
|
|
<IconChevronRight />
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export default ExampleProject
|