Card

1import type { Component, JSX } from "solid-js";
2import { splitProps } from "solid-js";
3import { cn } from "~/lib/utils";
4 
5const Card: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
6  const [local, rest] = splitProps(props, ["class"]);
7  return (
8    <div
9      class={cn("rounded-lg border bg-card text-card-foreground shadow-sm", local.class)}
10      {...rest}
11    />
12  );
13};
14 
15const CardHeader: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
16  const [local, rest] = splitProps(props, ["class"]);
17  return <div class={cn("flex flex-col space-y-1.5 p-6", local.class)} {...rest} />;
18};
19 
20const CardTitle: Component<JSX.HTMLAttributes<HTMLHeadingElement>> = (props) => {
21  const [local, rest] = splitProps(props, ["class"]);
22  return (
23    <h3 class={cn("text-2xl font-semibold leading-none tracking-tight", local.class)} {...rest} />
24  );
25};
26 
27const CardDescription: Component<JSX.HTMLAttributes<HTMLParagraphElement>> = (props) => {
28  const [local, rest] = splitProps(props, ["class"]);
29  return <p class={cn("text-sm text-muted-foreground", local.class)} {...rest} />;
30};
31 
32const CardContent: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
33  const [local, rest] = splitProps(props, ["class"]);
34  return <div class={cn("p-6 pt-0", local.class)} {...rest} />;
35};
36 
37const CardFooter: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => {
38  const [local, rest] = splitProps(props, ["class"]);
39  return <div class={cn("flex items-center p-6 pt-0", local.class)} {...rest} />;
40};
41 
42export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };