Files
supabase/apps/www/components/Partners/PartnerLinkBox.tsx
Ivan Vasilov 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2026-04-30 10:53:24 +00:00

55 lines
1.1 KiB
TypeScript

import Link from 'next/link'
import React from 'react'
const PartnerLinkBox = ({
href,
title,
description,
icon,
color = 'amber',
}: {
href: string
title: string
description: string
icon?: React.ReactNode
color?: 'amber' | 'brand' | 'blue'
}) => {
const colors = {
amber: 'bg-amber-300 text-amber-900',
blue: 'bg-blue-300 text-blue-900',
brand: 'bg-brand-300 text-brand',
}
const content = (
<div
className="
hover:border-foreground-lighter
bg-surface-100
group cursor-pointer rounded-sm
border px-5 py-4
"
>
<div className="flex flex-col gap-3">
<div
className={`${colors[color]}
flex h-8 w-8
items-center justify-center rounded-md
transition-all
group-hover:scale-110
`}
>
{icon}
</div>
<div>
<h5 className="text-foreground mb-2 text-base">{title}</h5>
<p className="p text-sm">{description}</p>
</div>
</div>
</div>
)
return <Link href={href}>{content}</Link>
}
export default PartnerLinkBox