Card

1import { css, html, LitElement } from "lit";
2import { customElement } from "lit/decorators.js";
3import { TW } from "@/lib/tailwindMixin";
4import { cn } from "@/lib/utils";
5 
6@customElement("ui-card")
7export class Card extends TW(LitElement) {
8  static styles = css`
9    :host {
10      display: block;
11    }
12  `;
13 
14  override render() {
15    return html`
16      <div
17        data-slot="card"
18        class=${cn(
19          "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-border py-6 shadow-sm",
20          this.className,
21        )}
22      >
23        <slot></slot>
24      </div>
25    `;
26  }
27}
28 
29@customElement("ui-card-header")
30export class CardHeader extends TW(LitElement) {
31  override render() {
32    return html`
33      <div
34        data-slot="card-header"
35        class=${cn(
36          "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-[*[data-slot=card-action]]:grid-cols-[1fr_auto] [.border-b]:pb-6",
37          this.className,
38        )}
39      >
40        <slot></slot>
41      </div>
42    `;
43  }
44}
45 
46@customElement("ui-card-title")
47export class CardTitle extends TW(LitElement) {
48  override render() {
49    return html`
50      <div
51        data-slot="card-title"
52        class=${cn("leading-none font-semibold", this.className)}
53      >
54        <slot></slot>
55      </div>
56    `;
57  }
58}
59 
60@customElement("ui-card-description")
61export class CardDescription extends TW(LitElement) {
62  override render() {
63    return html`
64      <div
65        data-slot="card-description"
66        class=${cn("text-muted-foreground text-sm", this.className)}
67      >
68        <slot></slot>
69      </div>
70    `;
71  }
72}
73 
74@customElement("ui-card-action")
75export class CardAction extends TW(LitElement) {
76  override render() {
77    return html`
78      <div
79        data-slot="card-action"
80        class=${cn(
81          "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
82          this.className,
83        )}
84      >
85        <slot></slot>
86      </div>
87    `;
88  }
89}
90 
91@customElement("ui-card-content")
92export class CardContent extends TW(LitElement) {
93  override render() {
94    return html`
95      <div data-slot="card-content" class=${cn("px-6", this.className)}>
96        <slot></slot>
97      </div>
98    `;
99  }
100}
101 
102@customElement("ui-card-footer")
103export class CardFooter extends TW(LitElement) {
104  override render() {
105    return html`
106      <div
107        data-slot="card-footer"
108        class=${cn("flex items-center px-6 [.border-t]:pt-6", this.className)}
109      >
110// … truncated