Card

1import Image from 'next/image';
2import { ComponentProps } from 'react';
3 
4import { Body2, Headline5 } from '@/components/ui/typography';
5import { cn } from '@/lib/utils';
6 
7/*
8 * UX4G card: border-radius 0.5rem, border 1px solid neutral-200, bg neutral-0,
9 * card-body / card-header / card-footer padding 1rem, card-header border-bottom 1px,
10 * card-footer border-top 1px, card-img-top border-radius calc(0.5rem - 1px)
11 */
12 
13/** Card container component. */
14function Card({ className, ...props }: ComponentProps<'div'>) {
15  return (
16    <div
17      className={cn(
18        'bg-neutral-0 text-neutral flex flex-col rounded-lg border border-neutral-200',
19        className,
20      )}
21      {...props}
22    />
23  );
24}
25 
26/** Card header section. */
27function CardHeader({ className, ...props }: ComponentProps<'div'>) {
28  return (
29    <div className={cn('text-neutral border-b border-neutral-200 p-4', className)} {...props} />
30  );
31}
32 
33/** Card title heading. */
34function CardTitle({ className, ...props }: ComponentProps<'h3'>) {
35  return <Headline5 className={cn('mb-2 tracking-tight', className)} {...props} />;
36}
37 
38/** Card description text. */
39function CardDescription({ className, ...props }: ComponentProps<'p'>) {
40  return <Body2 className={cn('text-neutral-500', className)} {...props} />;
41}
42 
43/** Card body content area. */
44function CardContent({ className, ...props }: ComponentProps<'div'>) {
45  return <div className={cn('p-4', className)} {...props} />;
46}
47 
48/** Card footer section. */
49function CardFooter({ className, ...props }: ComponentProps<'div'>) {
50  return (
51    <div
52      className={cn('text-neutral flex items-center border-t border-neutral-200 p-4', className)}
53      {...props}
54    />
55  );
56}
57 
58/** Card top image. */
59function CardImage({ className, alt = '', ...props }: ComponentProps<typeof Image>) {
60  return (
61    <Image
62      className={cn('w-full rounded-t-[calc(var(--radius)-1px)] object-cover', className)}
63      alt={alt}
64      {...props}
65    />
66  );
67}
68 
69export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardImage };