mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Ivan Vasilov
308cd791a2
This PR preps the monorepo for a migration to Tailwind v4: - Bump all Tailwind dependencies and libraries to the latest possible version, while still compatible with Tailwind 3. - Cleans up obsolete Tailwind 3 specific options and configs. - Cleans up unused CSS files and fixes the CSS imports. - Migrates all `important` uses in `@apply` lines to using the `!` prefix. - Move `typography.css` to the `config` package and import it from the apps. - Migrated all occurrences of `flex-grow`, `flex-shrink`, `overflow-clip` and `overflow-ellipsis` since they're deprecated and will be removed in Tailwind 4. - Make the default theme object typesafe in the `ui` package. - Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and `divider-opacity` to the new format where they're declared as part of the property color. - Bump and unify all imports of `postcss` dependency.
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="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="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
|