From bc5f8a26144cf6ca757bbc5ce57ee97afaa3b2c3 Mon Sep 17 00:00:00 2001
From: carstenlebek <carsten.lebek@googlemail.com>
Date: Sat, 4 Feb 2023 09:31:32 +0100
Subject: [PATCH 1/2] feat: :sparkles: Card component

Added a Card and CardGroup component
---
 .../src/lib/components/base/Card.svelte       | 45 +++++++++++++++++++
 .../src/lib/components/base/CardGroup.svelte  |  3 ++
 packages/kit-docs/src/lib/index.ts            |  2 +
 .../[...3]components/+page.md                 | 42 +++++++++++++++++
 4 files changed, 92 insertions(+)
 create mode 100644 packages/kit-docs/src/lib/components/base/Card.svelte
 create mode 100644 packages/kit-docs/src/lib/components/base/CardGroup.svelte

diff --git a/packages/kit-docs/src/lib/components/base/Card.svelte b/packages/kit-docs/src/lib/components/base/Card.svelte
new file mode 100644
index 0000000..19c2f88
--- /dev/null
+++ b/packages/kit-docs/src/lib/components/base/Card.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import clsx from 'clsx';
+  interface $$Props {
+    href?: string;
+    title: string;
+    description?: string;
+  }
+  export let href = '';
+  export let title = '';
+  export let description = '';
+
+  const as = href ? 'a' : 'div';
+
+  $: arrowClass = clsx(
+    href &&
+      'text-brand transition-all duration-100 opacity-0 group-hover:opacity-100 translate group-hover:translate-x-0 -translate-x-3',
+    !href ? 'hidden' : 'inline-block',
+  );
+</script>
+
+<svelte:element
+  this={as}
+  class={clsx(
+    'block not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-lg border border-border overflow-hidden px-6 py-5 w-full',
+    href && 'hover:border-brand cursor-pointer',
+  )}
+  {href}
+>
+  {#if $$slots['icon']}
+    <div class="h-6 w-6 text-brand">
+      <slot name="icon" />
+    </div>
+  {/if}
+  <h2 class="font-semibold text-xl dark:text-white mt-4">
+    <span>{title}</span>
+    {#if href}
+      <span class={arrowClass}>-></span>
+    {/if}
+  </h2>
+  {#if description}
+    <span class="mt-1 font-normal text-soft">
+      <p>{description}</p>
+    </span>
+  {/if}
+</svelte:element>
diff --git a/packages/kit-docs/src/lib/components/base/CardGroup.svelte b/packages/kit-docs/src/lib/components/base/CardGroup.svelte
new file mode 100644
index 0000000..c7a9ef4
--- /dev/null
+++ b/packages/kit-docs/src/lib/components/base/CardGroup.svelte
@@ -0,0 +1,3 @@
+<div class='not-prose grid 576:grid-cols-2 gap-x-4'>
+    <slot />
+</div>
\ No newline at end of file
diff --git a/packages/kit-docs/src/lib/index.ts b/packages/kit-docs/src/lib/index.ts
index f11e623..dfbd773 100644
--- a/packages/kit-docs/src/lib/index.ts
+++ b/packages/kit-docs/src/lib/index.ts
@@ -4,6 +4,8 @@ export * from './actions/prefetch-link.js';
 
 // Components
 export { default as Button } from './components/base/Button.svelte';
+export { default as Card } from './components/base/Card.svelte';
+export { default as CardGroup } from './components/base/CardGroup.svelte';
 export { default as Chip } from './components/base/Chip.svelte';
 export { default as ColorSchemeToggle } from './components/base/ColorSchemeToggle.svelte';
 export { default as Menu } from './components/base/Menu.svelte';
diff --git a/packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md b/packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md
index 7c242db..abe3e67 100644
--- a/packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md
+++ b/packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md
@@ -7,6 +7,48 @@ description: Guide to components that come with the default layout.
 In this section, we'll look at the components that you can import and use when working with
 the default layout.
 
+## Card
+
+<script>
+import { Card, CardGroup } from '$lib';
+import GitHubIcon from '~icons/ri/github-fill';
+import RocketIcon from '~icons/ri/rocket-fill';
+</script>
+
+```js copy
+import { Card, CardGroup } from '@svelteness/kit-docs';
+import GitHubIcon from '~icons/ri/github-fill';
+import RocketIcon from '~icons/ri/rocket-fill';
+```
+
+```svelte copy
+<CardGroup>
+  <Card
+    title="GitHub"
+    description="Check out the kit-docs GitHub repo."
+    href="https://github.com/svelteness/kit-docs"
+  >
+    <GitHubIcon slot="icon" />
+  </Card>
+  <Card 
+    title="Deploying" 
+    description="Learn how to deploy kit-docs." 
+    href="/docs/production/deploying"
+  >
+    <RocketIcon slot="icon" />
+  </Card>
+</CardGroup>
+```
+
+<CardGroup>
+  <Card title="GitHub" description="Check out the kit-docs GitHub repo." href="https://github.com/svelteness/kit-docs">
+    <GitHubIcon slot="icon" />
+  </Card>
+  <Card title="Deploying" description="Learn how to deploy kit-docs." href="/docs/production/deploying">
+    <RocketIcon slot="icon" />
+  </Card>
+</CardGroup>
+
 ## Social Link
 
 <script>

From c83691503f25892cee42a856c878a9142522122e Mon Sep 17 00:00:00 2001
From: carstenlebek <carsten.lebek@googlemail.com>
Date: Sat, 4 Feb 2023 09:38:57 +0100
Subject: [PATCH 2/2] feat: :lipstick: cols prop for CardGroup

---
 .../src/lib/components/base/CardGroup.svelte  | 20 ++++++++++++++++---
 .../[...3]components/+page.md                 |  4 ++--
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/kit-docs/src/lib/components/base/CardGroup.svelte b/packages/kit-docs/src/lib/components/base/CardGroup.svelte
index c7a9ef4..e940d55 100644
--- a/packages/kit-docs/src/lib/components/base/CardGroup.svelte
+++ b/packages/kit-docs/src/lib/components/base/CardGroup.svelte
@@ -1,3 +1,17 @@
-<div class='not-prose grid 576:grid-cols-2 gap-x-4'>
-    <slot />
-</div>
\ No newline at end of file
+<script lang="ts">
+  import clsx from 'clsx';
+
+  export let cols: 1 | 2 | 3 | 4 = 2;
+</script>
+
+<div
+  class={clsx(
+    'not-prose grid gap-x-4',
+    cols === 1 && '576:grid-cols-1',
+    cols === 2 && '576:grid-cols-2',
+    cols === 3 && '576:grid-cols-3',
+    cols === 4 && '576:grid-cols-4',
+  )}
+>
+  <slot />
+</div>
diff --git a/packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md b/packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md
index abe3e67..e2a078f 100644
--- a/packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md
+++ b/packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md
@@ -22,7 +22,7 @@ import RocketIcon from '~icons/ri/rocket-fill';
 ```
 
 ```svelte copy
-<CardGroup>
+<CardGroup cols={2}>
   <Card
     title="GitHub"
     description="Check out the kit-docs GitHub repo."
@@ -40,7 +40,7 @@ import RocketIcon from '~icons/ri/rocket-fill';
 </CardGroup>
 ```
 
-<CardGroup>
+<CardGroup cols={2}>
   <Card title="GitHub" description="Check out the kit-docs GitHub repo." href="https://github.com/svelteness/kit-docs">
     <GitHubIcon slot="icon" />
   </Card>