Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: ✨ Card component #74

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: ✨ Card component #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc5f8a2
feat: :sparkles: Card component
carstenlebek Feb 4, 2023
c836915
feat: :lipstick: cols prop for CardGroup
carstenlebek Feb 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions packages/kit-docs/src/lib/components/base/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
17 changes: 17 additions & 0 deletions packages/kit-docs/src/lib/components/base/CardGroup.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<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>
2 changes: 2 additions & 0 deletions packages/kit-docs/src/lib/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
42 changes: 42 additions & 0 deletions packages/kit-docs/src/routes/docs/[...2]default-layout/[...3]components/+page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 cols={2}>
<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 cols={2}>
<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>
Expand Down