-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Day 15, improve responsive & switcher
- Loading branch information
1 parent
b0ac473
commit e41bc40
Showing
9 changed files
with
267 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="160 110 170 220" | ||
| width="200" | ||
| height="230" | ||
| class={$$props.class} | ||
| {...$$props} | ||
| > | ||
| <ellipse | ||
| style="stroke: currentColor; fill: none; stroke-width: 5px;" | ||
| cx="250" | ||
| cy="200" | ||
| rx="85" | ||
| ry="85" | ||
| /> | ||
| <foreignObject x="163" y="112.5" width="174.5" height="175"> | ||
| <slot /> | ||
| </foreignObject> | ||
| <rect | ||
| x="180" | ||
| y="265" | ||
| width="140" | ||
| height="20" | ||
| style="stroke: currentColor; stroke-width: 5px; stroke-linejoin: round;" | ||
| /> | ||
| <rect | ||
| x="170" | ||
| y="285" | ||
| width="160" | ||
| height="35" | ||
| style="stroke: currentColor; stroke-width: 5px; stroke-linejoin: round;" | ||
| /> | ||
| </svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <script lang="ts"> | ||
| import { Checkbox as CheckboxPrimitive } from "bits-ui"; | ||
| import Check from "lucide-svelte/icons/check"; | ||
| import Minus from "lucide-svelte/icons/minus"; | ||
| import { cn } from "$lib/utils.js"; | ||
| type $$Props = CheckboxPrimitive.Props; | ||
| type $$Events = CheckboxPrimitive.Events; | ||
| let className: $$Props["class"] = undefined; | ||
| export let checked: $$Props["checked"] = false; | ||
| export { className as class }; | ||
| </script> | ||
|
|
||
| <CheckboxPrimitive.Root | ||
| class={cn( | ||
| "peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50", | ||
| className | ||
| )} | ||
| bind:checked | ||
| {...$$restProps} | ||
| on:click | ||
| > | ||
| <CheckboxPrimitive.Indicator | ||
| class={cn("flex h-4 w-4 items-center justify-center text-current")} | ||
| let:isChecked | ||
| let:isIndeterminate | ||
| > | ||
| {#if isChecked} | ||
| <Check class="h-3.5 w-3.5" /> | ||
| {:else if isIndeterminate} | ||
| <Minus class="h-3.5 w-3.5" /> | ||
| {/if} | ||
| </CheckboxPrimitive.Indicator> | ||
| </CheckboxPrimitive.Root> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import Root from "./checkbox.svelte"; | ||
| export { | ||
| Root, | ||
| // | ||
| Root as Checkbox, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <script lang="ts"> | ||
| import { page } from "$app/stores"; | ||
| import type { Component } from "lucide-svelte"; | ||
| import ChevronRight from "lucide-svelte/icons/chevron-right"; | ||
| import ScrollText from "lucide-svelte/icons/scroll-text"; | ||
| import Snowflake from "lucide-svelte/icons/snowflake"; | ||
| import { Button } from "$lib/components/ui/button"; | ||
| import { Separator } from "$lib/components/ui/separator"; | ||
| import * as Card from "$lib/components/ui/card"; | ||
| type Diy = { | ||
| icon: typeof Component; | ||
| name: string; | ||
| description: string; | ||
| url: string; | ||
| }; | ||
| const diys: Diy[] = [ | ||
| { | ||
| icon: ScrollText, | ||
| name: "Christmas card creator", | ||
| description: "Create your own Christmas card and send it to Santa!", | ||
| url: "/card-creator" | ||
| }, | ||
| { | ||
| icon: Snowflake, | ||
| name: "Snow globe creator", | ||
| description: "Create your snow globe you can share with your friends and family.", | ||
| url: "/snow-globe-creator" | ||
| } | ||
| ]; | ||
| </script> | ||
|
|
||
| <div class="container my-16 max-w-4xl"> | ||
| <h2 class="text-3xl font-bold tracking-tight"> | ||
| <span class="text-primary">DIY</span>s | ||
| </h2> | ||
| <Card.Root class="mt-4 pt-6"> | ||
| <Card.Content> | ||
| <ul> | ||
| {#each diys as diy, index} | ||
| <li class="flex flex-col justify-between gap-4 sm:flex-row"> | ||
| <div class="flex gap-6"> | ||
| <svelte:component this={diy.icon} class="size-12 min-w-8 text-primary" /> | ||
| <div class="flex flex-col"> | ||
| <h4 class="text-lg font-semibold">{diy.name}</h4> | ||
| <p class="text-muted-foreground">{diy.description}</p> | ||
| </div> | ||
| </div> | ||
| <Button href={$page.url + diy.url} variant="outline" class="ml-auto self-center"> | ||
| Visit | ||
| <ChevronRight class="ml-2 size-4" /> | ||
| </Button> | ||
| </li> | ||
| {#if index < diys.length - 1} | ||
| <Separator class="my-6" /> | ||
| {/if} | ||
| {/each} | ||
| </ul> | ||
| </Card.Content> | ||
| </Card.Root> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <script lang="ts"> | ||
| import ChevronLeft from "lucide-svelte/icons/chevron-left"; | ||
| import Snowflake from "lucide-svelte/icons/snowflake"; | ||
| import Snowflakes from "$lib/components/Snowflakes.svelte"; | ||
| import Day15 from "$lib/components/days/2023/Day15.svelte"; | ||
| import { Button } from "$lib/components/ui/button"; | ||
| import { Checkbox } from "$lib/components/ui/checkbox"; | ||
| import { Label } from "$lib/components/ui/label"; | ||
| import * as Card from "$lib/components/ui/card"; | ||
| import * as Tooltip from "$lib/components/ui/tooltip"; | ||
| type Image = { | ||
| src: string; | ||
| alt: string; | ||
| show: boolean; | ||
| }; | ||
| const imagesToShow: Image[] = [ | ||
| { | ||
| src: "https://www.freeiconspng.com/uploads/snowman-png-29.png", | ||
| alt: "Snowman", | ||
| show: true | ||
| }, | ||
| { | ||
| src: "https://www.freeiconspng.com/uploads/christmas-tree-icon-0.png", | ||
| alt: "Christmas tree", | ||
| show: false | ||
| }, | ||
| { | ||
| src: "https://www.freeiconspng.com/uploads/transparent-santa-claus-2.png", | ||
| alt: "Santa Claus", | ||
| show: false | ||
| } | ||
| ]; | ||
| let borderHex = "#000000"; | ||
| let fillHex = "#ffffff"; | ||
| </script> | ||
|
|
||
| <div class="container my-8"> | ||
| <Card.Root> | ||
| <Card.Header class="flex flex-row items-center gap-4 space-y-0"> | ||
| <Tooltip.Root> | ||
| <Tooltip.Trigger asChild let:builder> | ||
| <Button builders={[builder]} size="icon" href="." class="mr-6"> | ||
| <ChevronLeft /> | ||
| </Button> | ||
| </Tooltip.Trigger> | ||
| <Tooltip.Content>Back to the dashboard</Tooltip.Content> | ||
| </Tooltip.Root> | ||
| <Snowflake class="text-primary" /> | ||
| <div class="flex flex-col"> | ||
| <Card.Title>Snow Globe Creator</Card.Title> | ||
| <Card.Description | ||
| >Create your snow globe you can share with your friends and family.</Card.Description | ||
| > | ||
| </div> | ||
| </Card.Header> | ||
| <Card.Content class="flex flex-col gap-8"> | ||
| <!-- Globe --> | ||
| <Day15 class="relative mx-auto h-96 w-[22rem]" fill={fillHex} color={borderHex}> | ||
| <Snowflakes class="size-full rounded-full" /> | ||
| <div class="absolute inset-0 mb-6 flex items-end justify-center"> | ||
| {#each imagesToShow as { src, alt, show }} | ||
| {#if show} | ||
| <img {src} {alt} class="h-12 align-bottom" /> | ||
| {/if} | ||
| {/each} | ||
| </div> | ||
| </Day15> | ||
| <!-- Settings --> | ||
| <section class="flex flex-col gap-4"> | ||
| <h2 class="text-2xl">Settings</h2> | ||
| <div class="flex flex-col gap-4"> | ||
| <div class="flex items-center gap-4"> | ||
| <span class="font-semibold">Figures to show:</span> | ||
| {#each imagesToShow as { alt, show }, index} | ||
| <div class="flex items-center space-x-2"> | ||
| <Checkbox id={index.toString()} bind:checked={show} /> | ||
| <Label for={index.toString()}>{alt}</Label> | ||
| </div> | ||
| {/each} | ||
| </div> | ||
| <div class="flex items-center gap-4"> | ||
| <span class="font-semibold">Border color:</span> | ||
| {#if borderHex} | ||
| <input type="color" bind:value={borderHex} /> | ||
| {/if} | ||
| </div> | ||
| <div class="flex items-center gap-4"> | ||
| <span class="font-semibold">Fill color:</span> | ||
| {#if fillHex} | ||
| <input type="color" bind:value={fillHex} /> | ||
| {/if} | ||
| </div> | ||
| </div> | ||
| </section></Card.Content | ||
| > | ||
| </Card.Root> | ||
| </div> |