mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Ivan Vasilov
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>
70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import { AnimatePresence, motion } from 'framer-motion'
|
|
import { ChevronRight } from 'lucide-react'
|
|
import { Badge, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
|
|
|
|
import { formatCurrency } from '@/lib/helpers'
|
|
|
|
interface BillingChangeBadgeProps {
|
|
beforePrice?: number
|
|
afterPrice?: number
|
|
show: boolean | undefined
|
|
tooltip?: string
|
|
className?: string
|
|
free?: boolean
|
|
}
|
|
|
|
export const BillingChangeBadge = ({
|
|
beforePrice,
|
|
afterPrice,
|
|
show,
|
|
tooltip,
|
|
className,
|
|
free,
|
|
}: BillingChangeBadgeProps) => {
|
|
return (
|
|
<AnimatePresence>
|
|
{beforePrice !== undefined && afterPrice !== undefined && show && (
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -4, height: 0 }}
|
|
animate={{ opacity: 1, x: 0, height: 'auto' }}
|
|
exit={{ opacity: 0, x: -4, height: 0 }}
|
|
transition={{ type: 'spring', stiffness: 800, damping: 40, duration: 0.3 }}
|
|
>
|
|
<Badge
|
|
variant="default"
|
|
className={cn(
|
|
free ? `bg-violet-200 border-violet-900` : 'bg-alternative',
|
|
`text-warning`,
|
|
className
|
|
)}
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<div className="flex items-center gap-1">
|
|
<span className="text-xs font-mono text-foreground-muted" translate="no">
|
|
{formatCurrency(beforePrice)}
|
|
</span>
|
|
<ChevronRight size={12} strokeWidth={2} className="text-foreground-muted" />
|
|
<motion.span
|
|
key={afterPrice} // This key will change whenever any form value changes
|
|
className={cn(
|
|
free ? 'text-violet-1100' : 'text-foreground',
|
|
'text-xs font-mono'
|
|
)}
|
|
animate={{ scale: [1, 1.1, 1] }}
|
|
transition={{ duration: 0.12 }}
|
|
translate="no"
|
|
>
|
|
{`${formatCurrency(afterPrice)}/month`}
|
|
</motion.span>
|
|
</div>
|
|
</TooltipTrigger>
|
|
{tooltip !== undefined && <TooltipContent side="bottom">{tooltip}</TooltipContent>}
|
|
</Tooltip>
|
|
</Badge>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)
|
|
}
|