a: Update my website so it looks like a terminal
- Ready for a first deploy
- All mentions of my Soon:tm: blog have been removed
Signed-off-by: Skyler Grey <skyler3665@gmail.com>
diff --git a/packages/components/src/lib/ui/card/Card.svelte b/packages/components/src/lib/ui/card/Card.svelte
new file mode 100644
index 0000000..88576d9
--- /dev/null
+++ b/packages/components/src/lib/ui/card/Card.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+ import { cn } from "$lib/utils";
+
+ let className: string | undefined | null = undefined;
+ export { className as class };
+</script>
+
+<div
+ class={cn(
+ "rounded-lg border bg-card text-card-foreground shadow-sm",
+ className
+ )}
+ {...$$restProps}
+ on:click
+ on:focusin
+ on:focusout
+ on:mouseenter
+ on:mouseleave
+>
+ <slot />
+</div>
diff --git a/packages/components/src/lib/ui/card/CardContent.svelte b/packages/components/src/lib/ui/card/CardContent.svelte
new file mode 100644
index 0000000..9dcf30b
--- /dev/null
+++ b/packages/components/src/lib/ui/card/CardContent.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+ import { cn } from "$lib/utils";
+
+ let className: string | undefined | null = undefined;
+ export { className as class };
+</script>
+
+<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+ <slot />
+</div>
diff --git a/packages/components/src/lib/ui/card/CardDescription.svelte b/packages/components/src/lib/ui/card/CardDescription.svelte
new file mode 100644
index 0000000..81dc138
--- /dev/null
+++ b/packages/components/src/lib/ui/card/CardDescription.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+ import { cn } from "$lib/utils";
+
+ let className: string | undefined | null = undefined;
+ export { className as class };
+</script>
+
+<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+ <slot />
+</p>
diff --git a/packages/components/src/lib/ui/card/CardFooter.svelte b/packages/components/src/lib/ui/card/CardFooter.svelte
new file mode 100644
index 0000000..d46c7f0
--- /dev/null
+++ b/packages/components/src/lib/ui/card/CardFooter.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+ import { cn } from "$lib/utils";
+
+ let className: string | undefined | null = undefined;
+ export { className as class };
+</script>
+
+<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+ <slot />
+</div>
diff --git a/packages/components/src/lib/ui/card/CardHeader.svelte b/packages/components/src/lib/ui/card/CardHeader.svelte
new file mode 100644
index 0000000..9cd2ab1
--- /dev/null
+++ b/packages/components/src/lib/ui/card/CardHeader.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+ import { cn } from "$lib/utils";
+
+ let className: string | undefined | null = 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/packages/components/src/lib/ui/card/CardTitle.svelte b/packages/components/src/lib/ui/card/CardTitle.svelte
new file mode 100644
index 0000000..0b122e0
--- /dev/null
+++ b/packages/components/src/lib/ui/card/CardTitle.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+ import { cn } from "$lib/utils";
+
+ let className: string | undefined | null = undefined;
+ export { className as class };
+
+ export let tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" = "h3";
+</script>
+
+<svelte:element
+ this={tag}
+ class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+ {...$$restProps}
+>
+ <slot />
+</svelte:element>
diff --git a/packages/components/src/lib/ui/card/index.ts b/packages/components/src/lib/ui/card/index.ts
new file mode 100644
index 0000000..738a0ad
--- /dev/null
+++ b/packages/components/src/lib/ui/card/index.ts
@@ -0,0 +1,6 @@
+export { default as Card } from "./Card.svelte";
+export { default as CardContent } from "./CardContent.svelte";
+export { default as CardDescription } from "./CardDescription.svelte";
+export { default as CardFooter } from "./CardFooter.svelte";
+export { default as CardHeader } from "./CardHeader.svelte";
+export { default as CardTitle } from "./CardTitle.svelte";