bugfix: a small refactor done in folder structure and naming conventions.
This commit is contained in:
36
frontend/src/components/ui/shared/Card.tsx
Normal file
36
frontend/src/components/ui/shared/Card.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import type { ElementType, ReactNode } from 'react';
|
||||
|
||||
type CardPadding = 'none' | 'sm' | 'md' | 'lg';
|
||||
|
||||
type CardProps<T extends ElementType = 'div'> = {
|
||||
children: ReactNode;
|
||||
padding?: CardPadding;
|
||||
as?: T;
|
||||
className?: string;
|
||||
} & Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'children' | 'className'>;
|
||||
|
||||
const paddingClassMap: Record<CardPadding, string> = {
|
||||
none: '',
|
||||
sm: 'p-3',
|
||||
md: 'p-4',
|
||||
lg: 'p-6',
|
||||
};
|
||||
|
||||
export function Card<T extends ElementType = 'div'>({
|
||||
children,
|
||||
as,
|
||||
className = '',
|
||||
padding = 'md',
|
||||
...props
|
||||
}: CardProps<T>) {
|
||||
const Component = as ?? 'div';
|
||||
|
||||
return (
|
||||
<Component
|
||||
className={`rounded-[var(--radius-lg)] border border-card-border bg-card text-card-foreground ${paddingClassMap[padding]} ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user