generated from template/astro-template
57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
// components/card.ts
|
|
import type { VariantProps } from 'class-variance-authority';
|
|
import { cva, cx } from 'class-variance-authority';
|
|
import { cn } from '@/lib/utils';
|
|
/**
|
|
* Box
|
|
*/
|
|
export type BoxProps = VariantProps<typeof box>;
|
|
export const box = cva(['box', 'box-border'], {
|
|
variants: {
|
|
margin: { 0: 'm-0', 2: 'm-2', 4: 'm-4', 8: 'm-8' },
|
|
padding: { 0: 'p-0', 2: 'p-2', 4: 'p-4', 8: 'p-8' },
|
|
},
|
|
defaultVariants: {
|
|
margin: 0,
|
|
padding: 0,
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Card
|
|
*/
|
|
type CardBaseProps = VariantProps<typeof cardBase>;
|
|
const cardBase = cva(['card', 'border-solid', 'border-slate-300', 'rounded'], {
|
|
variants: {
|
|
shadow: {
|
|
md: 'drop-shadow-md',
|
|
lg: 'drop-shadow-lg',
|
|
xl: 'drop-shadow-xl',
|
|
},
|
|
},
|
|
});
|
|
|
|
export interface CardProps extends BoxProps, CardBaseProps {}
|
|
export const card = ({ margin, padding, shadow }: CardProps = {}) => cx(box({ margin, padding }), cardBase({ shadow }));
|
|
|
|
type CardBlankProps = {
|
|
number?: number;
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* CardBlank 空的卡片，用于占位
|
|
* @param props
|
|
* @returns
|
|
*/
|
|
export const CardBlank = (props: CardBlankProps) => {
|
|
const { number = 4, className } = props;
|
|
return (
|
|
<>
|
|
{new Array(number).fill(0).map((_, index) => {
|
|
return <div key={index} className={cn('w-[300px] shark-0', className)}></div>;
|
|
})}
|
|
</>
|
|
);
|
|
};
|