My personal website
renderg.host
1import { cn } from '@/lib/utils';
2
3export const getCardWrapperStyles = (onClick?: () => void, className?: string) =>
4 cn(
5 'group relative flex flex-col bg-white dark:bg-neutral-800 rounded-lg overflow-hidden transition-all',
6 onClick && 'cursor-pointer hover:shadow-lg',
7 className,
8 );
9
10export const coverImageContainer =
11 'relative aspect-[16/9] w-full overflow-hidden bg-neutral-100 dark:bg-neutral-700';
12
13export const coverImage = 'object-cover w-full h-full transition-transform group-hover:scale-105';
14
15export const contentContainer = 'flex flex-col gap-4 p-6';
16
17export const badgeMetaContainer = 'flex items-center justify-between gap-4';
18
19export const getBadgeStyles = (variant: 'primary' | 'secondary' = 'primary') =>
20 cn(
21 'inline-flex px-3 py-1 text-sm font-medium rounded-full',
22 variant === 'primary'
23 ? 'bg-brand-100 text-brand-900 dark:bg-brand-800 dark:text-brand-100'
24 : 'bg-neutral-100 text-neutral-900 dark:bg-neutral-700 dark:text-neutral-100',
25 );
26
27export const metaContainer = 'flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400';