@makolabs/ripple/dist/layout/card/ranked-card.js

Simple Svelte 5 powered component library ✨

import { tv } from 'tailwind-variants';
export const rankedCard = tv({
    slots: {
        container: 'grid gap-4',
        card: 'border border-default-200 rounded-lg p-4',
        header: 'flex items-center gap-2 mb-3',
        rank: 'text-base font-bold text-default-400',
        title: 'text-sm font-semibold text-default-900',
        metricsContainer: 'space-y-2 mb-3',
        metricRow: 'flex items-center justify-between text-sm',
        metricLabel: 'text-default-600',
        metricValue: 'font-medium text-default-900',
        actionContainer: 'pt-3 border-t border-default-200',
        actionText: 'text-xs text-default-600',
        actionLabel: 'font-semibold text-default-700'
    },
    variants: {
        columns: {
            1: { container: 'grid-cols-1' },
            2: { container: 'grid-cols-1 md:grid-cols-2' },
            3: { container: 'grid-cols-1 md:grid-cols-3' },
            4: { container: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4' }
        }
    },
    defaultVariants: {
        columns: 3
    }
});