Card

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