{"name":"workshop-01","type":"registry:block","files":[{"type":"registry:page","target":"routes/workshop-01/+page.svelte","highlightedContent":"

<script lang=\"ts\">\n  import WorkshopDashboard from '$lib/components/workshop-dashboard.svelte';\n</script>\n\n<div class=\"min-h-svh bg-(--text)/5 p-4 sm:p-8 dark:bg-(--bg)\">\n  <div class=\"mx-auto max-w-[800px]\"><WorkshopDashboard /></div>\n</div>\n

"},{"type":"registry:component","target":"components/workshop-dashboard.svelte","highlightedContent":"

<script lang=\"ts\">\n  import Icon from '@iconify/svelte';\n  import { cn } from '$lib/utils';\n  import { Button } from '$lib/components/ui/button';\n  import { Top } from '$lib/components/ui/top';\n  import { ListRow } from '$lib/components/ui/list-row';\n  import { ActionFooter } from '$lib/components/ui/action-footer';\n  import { Tabs, TabsList, TabsTrigger, TabsContent } from '$lib/components/ui/tabs';\n  import { Badge } from '$lib/components/ui/badge';\n  import { SearchField } from '$lib/components/ui/search-field';\n  import { GridList, GridListItem } from '$lib/components/ui/grid-list';\n  import { Checkbox } from '$lib/components/ui/checkbox';\n  import { Label } from '$lib/components/ui/label';\n  import { NumberField } from '$lib/components/ui/number-field';\n  let received = $state(false);\n  let agreed = $state(false);\n  let quantity = $state<number | null>(1);\n  let query = $state('');\n  let notice = $state('');\n  const services = [\n    { name: 'Pottery class', icon: 'heroicons:document-text-solid', color: 'text-(--accent)' },\n    { name: 'Drawing class', icon: 'heroicons:credit-card-solid', color: 'text-(--accent)' },\n    { name: 'Photo walk', icon: 'heroicons:gift-solid', color: 'text-amber-500' },\n    { name: 'Woodworking', icon: 'heroicons:question-mark-circle-solid', color: 'text-teal-500' }\n  ];\n</script>\n\n<div data-service-flow class=\"grid w-full min-w-0 gap-6 lg:grid-cols-2\">\n  <section aria-label=\"Class schedule\" class=\"overflow-hidden rounded-[24px] bg-(--bg-elevated)\">\n    <div class=\"flex items-center justify-between px-6 pt-6\">\n      <span class=\"text-[17px] font-semibold\">My classes</span>\n      <Badge variant=\"soft\" size=\"sm\">Open</Badge>\n    </div>\n    <Top\n      title={received ? 'Booking details opened' : 'This week'}\n      eyebrow=\"Make time for a new hobby\"\n    />\n    <ListRow title=\"Make a small bowl\" description=\"Saturday · Clay Studio\" density=\"comfortable\">\n      {#snippet trailing()}<Button size=\"sm\" disabled={received} onclick={() => (received = true)}\n          >{received ? 'Opened' : 'View booking'}</Button\n        >{/snippet}\n    </ListRow>\n    <ListRow title=\"Everyday drawing\" description=\"Sunday · North Studio\" density=\"comfortable\">\n      {#snippet trailing()}<span class=\"text-[17px] font-semibold text-(--text)/56\">14:00</span\n        >{/snippet}\n    </ListRow>\n    <ListRow\n      title=\"A walk with your camera\"\n      description=\"Next week · Riverside Park\"\n      density=\"comfortable\"\n    >\n      {#snippet trailing()}<span class=\"text-[17px] font-semibold text-(--text)/56\">11:00</span\n        >{/snippet}\n    </ListRow>\n    <div class=\"px-6 pt-3 pb-6\">\n      <Button\n        variant=\"ghost\"\n        tone=\"neutral\"\n        size=\"md\"\n        class=\"w-full\"\n        onclick={() => (notice = 'Monthly schedule opened')}>View monthly schedule</Button\n      >\n    </div>\n    <div class=\"h-[12px] bg-(--text)/5\"></div>\n    <Top title=\"Find your next hobby\" class=\"pb-4\" />\n    <div class=\"px-6 pb-4\">\n      <SearchField aria-label=\"Search classes\" placeholder=\"Search classes\" bind:value={query} />\n    </div>\n    <GridList columns={2} class=\"px-6\">\n      {#each services.filter((service) => service.name.includes(query)) as service (service.name)}\n        <GridListItem onclick={() => (notice = service.name)}>\n          {#snippet media()}<Icon icon={service.icon} class={service.color} width=\"24\" />{/snippet}\n          {service.name}\n        </GridListItem>\n      {/each}\n    </GridList>\n    <div class=\"h-6\"></div>\n  </section>\n  <section aria-label=\"Class booking\" class=\"overflow-hidden rounded-[24px] bg-(--bg-elevated)\">\n    <Tabs value=\"benefits\" class=\"gap-0\">\n      <div class={cn('px-4 pt-4')}>\n        <TabsList class=\"w-full\" aria-label=\"Class navigation\"\n          ><TabsTrigger class=\"flex-1\" value=\"benefits\">Classes</TabsTrigger><TabsTrigger\n            class=\"flex-1\"\n            value=\"history\">Bookings</TabsTrigger\n          ></TabsList\n        >\n      </div>\n      <TabsContent value=\"benefits\" class=\"mt-0\">\n        <Top\n          title=\"Make something this weekend\"\n          description=\"Discover a local studio and create something new.\"\n        />\n        <ActionFooter\n          ><Button onclick={() => (notice = 'Booking started')}>Book a class</Button></ActionFooter\n        >\n        <div class=\"h-[12px] bg-(--text)/5\"></div>\n        <div class=\"px-6 pt-6 pb-2 text-[15px] text-(--text)/56\">Explore classes</div>\n        {#each services as service (service.name)}\n          <ListRow title={service.name} density=\"comfortable\">\n            {#snippet leading()}<Icon\n                icon={service.icon}\n                class={service.color}\n                width=\"24\"\n              />{/snippet}\n            {#snippet trailing()}<Button\n                size=\"icon-sm\"\n                variant=\"ghost\"\n                tone=\"neutral\"\n                aria-label={service.name}\n                onclick={() => (notice = service.name)}\n                ><Icon icon=\"heroicons:chevron-right-solid\" class=\"size-5\" /></Button\n              >{/snippet}\n          </ListRow>\n        {/each}\n        <ListRow title=\"Participants\" density=\"comfortable\">\n          {#snippet trailing()}<NumberField\n              aria-label=\"Participants\"\n              bind:value={quantity}\n              min={1}\n              max={5}\n              size=\"md\"\n            />{/snippet}\n        </ListRow>\n        <div class=\"flex items-center gap-3 px-6 py-5\">\n          <Checkbox id=\"flow-agree\" variant=\"line\" bind:checked={agreed} /><Label for=\"flow-agree\"\n            >Send me new class updates</Label\n          >\n        </div>\n      </TabsContent>\n      <TabsContent value=\"history\"\n        ><Top\n          title=\"No bookings yet\"\n          description=\"Find a class you would love to try.\"\n        /></TabsContent\n      >\n    </Tabs>\n  </section>\n  <p role=\"status\" class=\"min-h-6 text-sm text-(--text)/56 lg:col-span-2\">{notice}</p>\n</div>\n

"}]}

Blocks