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>
101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
import Button from 'components/Button'
|
|
|
|
type PostMetaProps = {
|
|
name: string
|
|
avatarUrl: string
|
|
publishDate: string
|
|
readLength: number
|
|
}
|
|
|
|
type Props = {
|
|
title: string
|
|
type: 'Project Example' | 'Case Study' | 'Blog Post'
|
|
description: string
|
|
imgUrl: string
|
|
url: string
|
|
logoUrl?: string
|
|
ctaText?: string
|
|
icons?: any[]
|
|
postMeta?: PostMetaProps
|
|
}
|
|
|
|
const Card = (props: Props) => {
|
|
const {
|
|
title,
|
|
type,
|
|
description,
|
|
imgUrl,
|
|
url,
|
|
logoUrl = '',
|
|
ctaText = '',
|
|
icons = [],
|
|
postMeta = {
|
|
name: '',
|
|
avatarUrl: '',
|
|
publishDate: '',
|
|
readLength: '',
|
|
},
|
|
} = props
|
|
|
|
const iconMarkup =
|
|
icons &&
|
|
icons.map((icon: any) => {
|
|
return (
|
|
<img
|
|
key={icon.imgAlt}
|
|
className="inline-block h-12 w-12 rounded-full ring-2 ring-white"
|
|
src={icon.imgUrl}
|
|
alt={icon.imgAlt}
|
|
/>
|
|
)
|
|
})
|
|
|
|
return (
|
|
<a
|
|
href={url}
|
|
target="_blank"
|
|
className="relative flex transform flex-col overflow-hidden rounded-md shadow-lg transition hover:-translate-y-1 hover:shadow-2xl"
|
|
>
|
|
<div className="flex-shrink-0">
|
|
<img className="h-64 w-full text-foreground-light object-cover" src={imgUrl} alt={title} />
|
|
</div>
|
|
<div className="bg-surface-100 flex flex-1 flex-col justify-between p-8">
|
|
<div className="flex-1">
|
|
{/* {icons && (
|
|
<div className="-mt-12 mb-6 flex -space-x-3">
|
|
{iconMarkup}
|
|
</div>
|
|
)} */}
|
|
<p className="font-base text-foreground-lighter text-sm capitalize">{type}</p>
|
|
<div className="mt-2 flex h-32 flex-col justify-between">
|
|
{/* {logoUrl && <img src={logoUrl} className="h-9 my-4" />} */}
|
|
{title && <p className="text-xl text-foreground">{title}</p>}
|
|
<p className="text-foreground-lighter mt-3 text-base">
|
|
{type !== 'Project Example' ? postMeta.publishDate : description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{type === 'Case Study' && postMeta.name.length > 0 && (
|
|
<div className="mt-6 flex items-center">
|
|
<div className="flex-shrink-0">
|
|
<span className="sr-only">{postMeta.name}</span>
|
|
<img className="h-10 w-10 rounded-full" src={postMeta.avatarUrl} alt="" />
|
|
</div>
|
|
<div className="ml-3">
|
|
<p className="text-sm font-medium text-foreground">{postMeta.name}</p>
|
|
<div className="text-foreground-lighter flex space-x-1 text-sm">
|
|
<time dateTime="2020-03-16">{postMeta.publishDate}</time>
|
|
<span aria-hidden="true">·</span>
|
|
<span>{postMeta.readLength} min read</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{ctaText && <Button className="mt-5" type="secondary" text={ctaText} url={url} />}
|
|
</div>
|
|
</a>
|
|
)
|
|
}
|
|
|
|
export default Card
|