From b56961377bec9068e20a8112df4a064166359640 Mon Sep 17 00:00:00 2001
From: Shahrad Elahi <shahradq@gmail.com>
Date: Sat, 4 Nov 2023 14:59:58 +0330
Subject: [PATCH] add shadcn-svelte card component

---
 .../components/ui/card/card-content.svelte    | 13 ++++++++++
 .../ui/card/card-description.svelte           | 13 ++++++++++
 .../lib/components/ui/card/card-footer.svelte | 13 ++++++++++
 .../lib/components/ui/card/card-header.svelte | 13 ++++++++++
 .../lib/components/ui/card/card-title.svelte  | 17 +++++++++++++
 web/src/lib/components/ui/card/card.svelte    | 13 ++++++++++
 web/src/lib/components/ui/card/index.ts       | 24 +++++++++++++++++++
 7 files changed, 106 insertions(+)
 create mode 100644 web/src/lib/components/ui/card/card-content.svelte
 create mode 100644 web/src/lib/components/ui/card/card-description.svelte
 create mode 100644 web/src/lib/components/ui/card/card-footer.svelte
 create mode 100644 web/src/lib/components/ui/card/card-header.svelte
 create mode 100644 web/src/lib/components/ui/card/card-title.svelte
 create mode 100644 web/src/lib/components/ui/card/card.svelte
 create mode 100644 web/src/lib/components/ui/card/index.ts

diff --git a/web/src/lib/components/ui/card/card-content.svelte b/web/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..07079c8
--- /dev/null
+++ b/web/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { cn } from '$lib/utils';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('p-6 pt-0', className)} {...$$restProps}>
+  <slot />
+</div>
diff --git a/web/src/lib/components/ui/card/card-description.svelte b/web/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..be3cf9f
--- /dev/null
+++ b/web/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils';
+
+  type $$Props = HTMLAttributes<HTMLParagraphElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<p class={cn('text-sm text-muted-foreground', className)} {...$$restProps}>
+  <slot />
+</p>
diff --git a/web/src/lib/components/ui/card/card-footer.svelte b/web/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..a2d71b0
--- /dev/null
+++ b/web/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('flex items-center p-6 pt-0', className)} {...$$restProps}>
+  <slot />
+</div>
diff --git a/web/src/lib/components/ui/card/card-header.svelte b/web/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..041b008
--- /dev/null
+++ b/web/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('flex flex-col space-y-1.5 p-6', className)} {...$$restProps}>
+  <slot />
+</div>
diff --git a/web/src/lib/components/ui/card/card-title.svelte b/web/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..4985ee0
--- /dev/null
+++ b/web/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils';
+  import type { HeadingLevel } from '.';
+
+  type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+    tag?: HeadingLevel;
+  };
+
+  let className: $$Props['class'] = undefined;
+  export let tag: $$Props['tag'] = 'h3';
+  export { className as class };
+</script>
+
+<svelte:element this={tag} class={cn('text-lg font-semibold leading-none tracking-tight', className)} {...$$restProps}>
+  <slot />
+</svelte:element>
diff --git a/web/src/lib/components/ui/card/card.svelte b/web/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..c3330c4
--- /dev/null
+++ b/web/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn } from '$lib/utils';
+
+  type $$Props = HTMLAttributes<HTMLDivElement>;
+
+  let className: $$Props['class'] = undefined;
+  export { className as class };
+</script>
+
+<div class={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...$$restProps}>
+  <slot />
+</div>
diff --git a/web/src/lib/components/ui/card/index.ts b/web/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..1432839
--- /dev/null
+++ b/web/src/lib/components/ui/card/index.ts
@@ -0,0 +1,24 @@
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+
+export {
+  Root,
+  Content,
+  Description,
+  Footer,
+  Header,
+  Title,
+  //
+  Root as Card,
+  Content as CardContent,
+  Description as CardDescription,
+  Footer as CardFooter,
+  Header as CardHeader,
+  Title as CardTitle,
+};
+
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';