mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Ivan VasilovandJordi Enric
56de26fe22
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>
67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import { motion } from 'framer-motion'
|
|
|
|
interface DotGridProps {
|
|
rows: number
|
|
columns: number
|
|
count: number
|
|
}
|
|
|
|
export const DotGrid = ({ rows, columns, count }: DotGridProps) => {
|
|
const container = {
|
|
hidden: { opacity: 1 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.05,
|
|
delayChildren: 0.05,
|
|
},
|
|
},
|
|
}
|
|
|
|
const item = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: [1, 0.5, 1],
|
|
transition: {
|
|
repeat: Infinity,
|
|
duration: 0.5,
|
|
repeatDelay: 1.5,
|
|
ease: 'easeInOut',
|
|
},
|
|
},
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="relative w-full h-full"
|
|
style={{
|
|
maskImage: 'linear-gradient(to bottom, black, transparent)',
|
|
WebkitMaskImage: 'linear-gradient(to bottom, black, transparent)',
|
|
}}
|
|
>
|
|
<motion.div
|
|
className="grid w-full h-full justify-between items-space-between items-start"
|
|
style={{
|
|
gridTemplateColumns: `repeat(${columns}, 1px)`,
|
|
gridTemplateRows: `repeat(${rows}, 1fr)`,
|
|
rowGap: 'auto',
|
|
}}
|
|
variants={container}
|
|
initial="hidden"
|
|
animate="visible"
|
|
aria-label={`Grid of ${rows * columns} dots, ${count} highlighted`}
|
|
>
|
|
{Array.from({ length: rows * columns }).map((_, index) => {
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
variants={item}
|
|
className={`w-px h-px rounded-full bg-foreground`}
|
|
/>
|
|
)
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
)
|
|
}
|