finished the front for the task manager
This commit is contained in:
celeste
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="cerberus">
|
||||
<html lang="en" data-theme='goupiliot' class="light">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
205
front/src/goupiliot.css
Normal file
205
front/src/goupiliot.css
Normal file
@@ -0,0 +1,205 @@
|
||||
[data-theme='goupiliot'] {
|
||||
--text-scaling: 1.067;
|
||||
--base-font-color: var(--color-surface-950);
|
||||
--base-font-color-dark: var(--color-surface-50);
|
||||
--base-font-family: system-ui, sans-serif;
|
||||
--base-font-size: inherit;
|
||||
--base-line-height: inherit;
|
||||
--base-font-weight: normal;
|
||||
--base-font-style: normal;
|
||||
--base-letter-spacing: 0.025em;
|
||||
--heading-font-color: inherit;
|
||||
--heading-font-color-dark: inherit;
|
||||
--heading-font-family: inherit;
|
||||
--heading-font-weight: bold;
|
||||
--heading-font-style: normal;
|
||||
--heading-letter-spacing: inherit;
|
||||
--anchor-font-color: var(--color-primary-500);
|
||||
--anchor-font-color-dark: var(--color-primary-500);
|
||||
--anchor-font-family: inherit;
|
||||
--anchor-font-size: inherit;
|
||||
--anchor-line-height: inherit;
|
||||
--anchor-font-weight: inherit;
|
||||
--anchor-font-style: inherit;
|
||||
--anchor-letter-spacing: inherit;
|
||||
--anchor-text-decoration: none;
|
||||
--anchor-text-decoration-hover: underline;
|
||||
--anchor-text-decoration-active: none;
|
||||
--anchor-text-decoration-focus: none;
|
||||
--spacing: 0.25rem;
|
||||
--radius-base: 0.375rem;
|
||||
--radius-container: 0.25rem;
|
||||
--default-border-width: 2px;
|
||||
--default-divide-width: 1px;
|
||||
--default-ring-width: 2px;
|
||||
--body-background-color: var(--color-surface-50);
|
||||
--body-background-color-dark: var(--color-surface-950);
|
||||
--color-primary-50: oklch(98.16% 0.1 108.13deg);
|
||||
--color-primary-100: oklch(94.09% 0.11 100.54deg);
|
||||
--color-primary-200: oklch(90.08% 0.12 93.82deg);
|
||||
--color-primary-300: oklch(85.95% 0.13 87.05deg);
|
||||
--color-primary-400: oklch(82.12% 0.14 81.24deg);
|
||||
--color-primary-500: oklch(78.41% 0.15 75.35deg);
|
||||
--color-primary-600: oklch(71.17% 0.14 74.08deg);
|
||||
--color-primary-700: oklch(63.68% 0.13 71.08deg);
|
||||
--color-primary-800: oklch(56.05% 0.12 68.79deg);
|
||||
--color-primary-900: oklch(48.12% 0.1 63.98deg);
|
||||
--color-primary-950: oklch(39.94% 0.09 60.09deg);
|
||||
--color-primary-contrast-dark: var(--color-primary-950);
|
||||
--color-primary-contrast-light: var(--color-primary-50);
|
||||
--color-primary-contrast-50: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-100: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-200: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-300: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-400: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-500: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-600: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-700: var(--color-primary-contrast-dark);
|
||||
--color-primary-contrast-800: var(--color-primary-contrast-light);
|
||||
--color-primary-contrast-900: var(--color-primary-contrast-light);
|
||||
--color-primary-contrast-950: var(--color-primary-contrast-light);
|
||||
--color-secondary-50: oklch(95.26% 0.14 123.51deg);
|
||||
--color-secondary-100: oklch(89.97% 0.16 126.77deg);
|
||||
--color-secondary-200: oklch(84.75% 0.18 129.44deg);
|
||||
--color-secondary-300: oklch(79.92% 0.2 131.79deg);
|
||||
--color-secondary-400: oklch(74.92% 0.21 134.12deg);
|
||||
--color-secondary-500: oklch(70.08% 0.21 136.58deg);
|
||||
--color-secondary-600: oklch(63.07% 0.19 137.35deg);
|
||||
--color-secondary-700: oklch(56.13% 0.18 138.48deg);
|
||||
--color-secondary-800: oklch(48.75% 0.16 139.56deg);
|
||||
--color-secondary-900: oklch(41.42% 0.14 140.94deg);
|
||||
--color-secondary-950: oklch(33.5% 0.11 142.5deg);
|
||||
--color-secondary-contrast-dark: var(--color-secondary-950);
|
||||
--color-secondary-contrast-light: var(--color-secondary-50);
|
||||
--color-secondary-contrast-50: var(--color-secondary-contrast-dark);
|
||||
--color-secondary-contrast-100: var(--color-secondary-contrast-dark);
|
||||
--color-secondary-contrast-200: var(--color-secondary-contrast-dark);
|
||||
--color-secondary-contrast-300: var(--color-secondary-contrast-dark);
|
||||
--color-secondary-contrast-400: var(--color-secondary-contrast-dark);
|
||||
--color-secondary-contrast-500: var(--color-secondary-contrast-dark);
|
||||
--color-secondary-contrast-600: var(--color-secondary-contrast-light);
|
||||
--color-secondary-contrast-700: var(--color-secondary-contrast-light);
|
||||
--color-secondary-contrast-800: var(--color-secondary-contrast-light);
|
||||
--color-secondary-contrast-900: var(--color-secondary-contrast-light);
|
||||
--color-secondary-contrast-950: var(--color-secondary-contrast-light);
|
||||
--color-tertiary-50: oklch(98.16% 0.1 108.13deg);
|
||||
--color-tertiary-100: oklch(93.28% 0.11 95.77deg);
|
||||
--color-tertiary-200: oklch(88.52% 0.11 84.07deg);
|
||||
--color-tertiary-300: oklch(83.9% 0.13 73.93deg);
|
||||
--color-tertiary-400: oklch(79.52% 0.14 64.97deg);
|
||||
--color-tertiary-500: oklch(75.41% 0.16 57.22deg);
|
||||
--color-tertiary-600: oklch(68.04% 0.15 53.94deg);
|
||||
--color-tertiary-700: oklch(60.66% 0.14 50.95deg);
|
||||
--color-tertiary-800: oklch(52.82% 0.14 46.89deg);
|
||||
--color-tertiary-900: oklch(45.13% 0.13 42.77deg);
|
||||
--color-tertiary-950: oklch(37.18% 0.12 38.25deg);
|
||||
--color-tertiary-contrast-dark: var(--color-tertiary-950);
|
||||
--color-tertiary-contrast-light: var(--color-tertiary-50);
|
||||
--color-tertiary-contrast-50: var(--color-tertiary-contrast-dark);
|
||||
--color-tertiary-contrast-100: var(--color-tertiary-contrast-dark);
|
||||
--color-tertiary-contrast-200: var(--color-tertiary-contrast-dark);
|
||||
--color-tertiary-contrast-300: var(--color-tertiary-contrast-dark);
|
||||
--color-tertiary-contrast-400: var(--color-tertiary-contrast-dark);
|
||||
--color-tertiary-contrast-500: var(--color-tertiary-contrast-dark);
|
||||
--color-tertiary-contrast-600: var(--color-tertiary-contrast-dark);
|
||||
--color-tertiary-contrast-700: var(--color-tertiary-contrast-dark);
|
||||
--color-tertiary-contrast-800: var(--color-tertiary-contrast-light);
|
||||
--color-tertiary-contrast-900: var(--color-tertiary-contrast-light);
|
||||
--color-tertiary-contrast-950: var(--color-tertiary-contrast-light);
|
||||
--color-success-50: oklch(95.47% 0.11 128.28deg);
|
||||
--color-success-100: oklch(91.61% 0.14 133.25deg);
|
||||
--color-success-200: oklch(88.18% 0.18 136.34deg);
|
||||
--color-success-300: oklch(84.79% 0.2 138.39deg);
|
||||
--color-success-400: oklch(81.9% 0.23 139.76deg);
|
||||
--color-success-500: oklch(79.07% 0.24 140.78deg);
|
||||
--color-success-600: oklch(72.14% 0.23 141.14deg);
|
||||
--color-success-700: oklch(65.09% 0.21 141.46deg);
|
||||
--color-success-800: oklch(58.12% 0.19 141.89deg);
|
||||
--color-success-900: oklch(50.7% 0.17 142.22deg);
|
||||
--color-success-950: oklch(42.99% 0.15 142.5deg);
|
||||
--color-success-contrast-dark: var(--color-success-950);
|
||||
--color-success-contrast-light: var(--color-success-50);
|
||||
--color-success-contrast-50: var(--color-success-contrast-dark);
|
||||
--color-success-contrast-100: var(--color-success-contrast-dark);
|
||||
--color-success-contrast-200: var(--color-success-contrast-dark);
|
||||
--color-success-contrast-300: var(--color-success-contrast-dark);
|
||||
--color-success-contrast-400: var(--color-success-contrast-dark);
|
||||
--color-success-contrast-500: var(--color-success-contrast-dark);
|
||||
--color-success-contrast-600: var(--color-success-contrast-dark);
|
||||
--color-success-contrast-700: var(--color-success-contrast-dark);
|
||||
--color-success-contrast-800: var(--color-success-contrast-dark);
|
||||
--color-success-contrast-900: var(--color-success-contrast-light);
|
||||
--color-success-contrast-950: var(--color-success-contrast-light);
|
||||
--color-warning-50: oklch(95.67% 0.05 84.56deg);
|
||||
--color-warning-100: oklch(92.83% 0.06 82.16deg);
|
||||
--color-warning-200: oklch(90.12% 0.08 80.33deg);
|
||||
--color-warning-300: oklch(87.59% 0.1 80.01deg);
|
||||
--color-warning-400: oklch(85.03% 0.12 78.35deg);
|
||||
--color-warning-500: oklch(82.46% 0.14 76.71deg);
|
||||
--color-warning-600: oklch(76.34% 0.13 72.25deg);
|
||||
--color-warning-700: oklch(70.34% 0.13 68.09deg);
|
||||
--color-warning-800: oklch(63.99% 0.13 63.18deg);
|
||||
--color-warning-900: oklch(57.91% 0.13 57.97deg);
|
||||
--color-warning-950: oklch(51.69% 0.13 51.44deg);
|
||||
--color-warning-contrast-dark: var(--color-warning-950);
|
||||
--color-warning-contrast-light: var(--color-warning-50);
|
||||
--color-warning-contrast-50: var(--color-warning-contrast-dark);
|
||||
--color-warning-contrast-100: var(--color-warning-contrast-dark);
|
||||
--color-warning-contrast-200: var(--color-warning-contrast-dark);
|
||||
--color-warning-contrast-300: var(--color-warning-contrast-dark);
|
||||
--color-warning-contrast-400: var(--color-warning-contrast-dark);
|
||||
--color-warning-contrast-500: var(--color-warning-contrast-dark);
|
||||
--color-warning-contrast-600: var(--color-warning-contrast-light);
|
||||
--color-warning-contrast-700: var(--color-warning-contrast-light);
|
||||
--color-warning-contrast-800: var(--color-warning-contrast-light);
|
||||
--color-warning-contrast-900: var(--color-warning-contrast-light);
|
||||
--color-warning-contrast-950: var(--color-warning-contrast-light);
|
||||
--color-error-50: oklch(89.99% 0.04 14.04deg);
|
||||
--color-error-100: oklch(83.49% 0.07 19.81deg);
|
||||
--color-error-200: oklch(77.4% 0.11 21.98deg);
|
||||
--color-error-300: oklch(72.13% 0.15 24.9deg);
|
||||
--color-error-400: oklch(67.39% 0.19 26.71deg);
|
||||
--color-error-500: oklch(63.72% 0.22 28.71deg);
|
||||
--color-error-600: oklch(59.28% 0.21 28.53deg);
|
||||
--color-error-700: oklch(54.92% 0.2 28.58deg);
|
||||
--color-error-800: oklch(50.51% 0.19 28.72deg);
|
||||
--color-error-900: oklch(46.22% 0.18 28.88deg);
|
||||
--color-error-950: oklch(41.86% 0.17 29.23deg);
|
||||
--color-error-contrast-dark: var(--color-error-950);
|
||||
--color-error-contrast-light: var(--color-error-50);
|
||||
--color-error-contrast-50: var(--color-error-contrast-dark);
|
||||
--color-error-contrast-100: var(--color-error-contrast-dark);
|
||||
--color-error-contrast-200: var(--color-error-contrast-dark);
|
||||
--color-error-contrast-300: var(--color-error-contrast-dark);
|
||||
--color-error-contrast-400: var(--color-error-contrast-dark);
|
||||
--color-error-contrast-500: var(--color-error-contrast-light);
|
||||
--color-error-contrast-600: var(--color-error-contrast-light);
|
||||
--color-error-contrast-700: var(--color-error-contrast-light);
|
||||
--color-error-contrast-800: var(--color-error-contrast-light);
|
||||
--color-error-contrast-900: var(--color-error-contrast-light);
|
||||
--color-error-contrast-950: var(--color-error-contrast-light);
|
||||
--color-surface-50: oklch(97.17% 0.01 24.46deg);
|
||||
--color-surface-100: oklch(89.83% 0.01 25.23deg);
|
||||
--color-surface-200: oklch(82.19% 0.01 24.46deg);
|
||||
--color-surface-300: oklch(74.52% 0.01 25.22deg);
|
||||
--color-surface-400: oklch(66.5% 0.01 24.48deg);
|
||||
--color-surface-500: oklch(58.39% 0.01 25.24deg);
|
||||
--color-surface-600: oklch(51.39% 0.01 26.18deg);
|
||||
--color-surface-700: oklch(43.87% 0.01 26.21deg);
|
||||
--color-surface-800: oklch(36.41% 0.01 26.25deg);
|
||||
--color-surface-900: oklch(28.13% 0.01 26.35deg);
|
||||
--color-surface-950: oklch(19.52% 0.01 27.68deg);
|
||||
--color-surface-contrast-dark: var(--color-surface-950);
|
||||
--color-surface-contrast-light: var(--color-surface-50);
|
||||
--color-surface-contrast-50: var(--color-surface-contrast-dark);
|
||||
--color-surface-contrast-100: var(--color-surface-contrast-dark);
|
||||
--color-surface-contrast-200: var(--color-surface-contrast-dark);
|
||||
--color-surface-contrast-300: var(--color-surface-contrast-dark);
|
||||
--color-surface-contrast-400: var(--color-surface-contrast-dark);
|
||||
--color-surface-contrast-500: var(--color-surface-contrast-dark);
|
||||
--color-surface-contrast-600: var(--color-surface-contrast-light);
|
||||
--color-surface-contrast-700: var(--color-surface-contrast-light);
|
||||
--color-surface-contrast-800: var(--color-surface-contrast-light);
|
||||
--color-surface-contrast-900: var(--color-surface-contrast-light);
|
||||
--color-surface-contrast-950: var(--color-surface-contrast-light);
|
||||
}
|
||||
@@ -1,9 +1,102 @@
|
||||
<script lang="ts">
|
||||
import './layout.css';
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
import './layout.css';
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
import { onMount } from 'svelte';
|
||||
import {
|
||||
CheckCheckIcon,
|
||||
StoreIcon,
|
||||
HouseIcon,
|
||||
SailboatIcon,
|
||||
SettingsIcon,
|
||||
} from 'lucide-svelte';
|
||||
import { Navigation } from '@skeletonlabs/skeleton-svelte';
|
||||
import { Avatar } from '@skeletonlabs/skeleton-svelte';
|
||||
|
||||
let { children } = $props();
|
||||
let { children } = $props();
|
||||
|
||||
// 1. Logic to handle responsive layout type
|
||||
let navLayout = $state<'sidebar' | 'bar'>('sidebar');
|
||||
|
||||
onMount(() => {
|
||||
const updateLayout = () => {
|
||||
navLayout = window.innerWidth < 768 ? 'bar' : 'sidebar';
|
||||
};
|
||||
updateLayout(); // Set initial
|
||||
window.addEventListener('resize', updateLayout);
|
||||
return () => window.removeEventListener('resize', updateLayout);
|
||||
});
|
||||
|
||||
const linksSidebar = {
|
||||
gestiong: [
|
||||
{ label: 'Taches', href: '/taches/', icon: CheckCheckIcon },
|
||||
{ label: 'courses', href: '/courses/', icon: StoreIcon },
|
||||
],
|
||||
recreation: [
|
||||
{ label: 'Sailing', href: '/#', icon: SailboatIcon },
|
||||
],
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head><link rel="icon" href={favicon} /></svelte:head>
|
||||
{@render children()}
|
||||
|
||||
<div class="w-full h-dvh grid overflow-hidden
|
||||
{navLayout === 'sidebar' ? 'grid-cols-[auto_1fr]' : 'grid-rows-[1fr_auto]'}">
|
||||
|
||||
<main class="overflow-y-auto {navLayout === "bar" ? '' : ' order-2'} ">
|
||||
{@render children()}
|
||||
</main>
|
||||
|
||||
<Navigation
|
||||
layout={navLayout}
|
||||
class="border-r-2 preset-filled-primary-500 font-bold text-2xl {navLayout === 'sidebar' ? 'h-full' : 'w-full '}"
|
||||
>
|
||||
<Navigation.Header class="p-6 {navLayout === 'bar' ? 'hidden' : ''}">
|
||||
<Avatar class="size-20 py-6">
|
||||
<Avatar.Image src="rex.png" alt="big" />
|
||||
<Avatar.Fallback>rex the cool</Avatar.Fallback>
|
||||
</Avatar>
|
||||
</Navigation.Header>
|
||||
|
||||
<Navigation.Content class={navLayout === 'bar' ? 'flex flex-row justify-center w-full' : ''}>
|
||||
<Navigation.Group>
|
||||
<Navigation.Menu>
|
||||
<Navigation.TriggerAnchor href="/">
|
||||
<HouseIcon class="size-4" />
|
||||
<Navigation.TriggerText>Home</Navigation.TriggerText>
|
||||
</Navigation.TriggerAnchor>
|
||||
</Navigation.Menu>
|
||||
</Navigation.Group>
|
||||
|
||||
{#each Object.entries(linksSidebar) as [category, links]}
|
||||
<Navigation.Group>
|
||||
<Navigation.Label class="capitalize pl-2 {navLayout === 'bar' ? 'hidden' : ''}">
|
||||
{category}
|
||||
</Navigation.Label>
|
||||
<Navigation.Menu>
|
||||
{#each links as link}
|
||||
{@const Icon = link.icon}
|
||||
<Navigation.TriggerAnchor href={link.href} title={link.label}>
|
||||
<Icon class="size-4" />
|
||||
<Navigation.TriggerText >{link.label}</Navigation.TriggerText>
|
||||
</Navigation.TriggerAnchor>
|
||||
{/each}
|
||||
</Navigation.Menu>
|
||||
</Navigation.Group>
|
||||
{/each}
|
||||
|
||||
<Navigation.Footer>
|
||||
<Navigation.TriggerAnchor href="/" title="Settings">
|
||||
<SettingsIcon class="size-4" />
|
||||
<Navigation.TriggerText>Settings</Navigation.TriggerText>
|
||||
</Navigation.TriggerAnchor>
|
||||
</Navigation.Footer>
|
||||
|
||||
</Navigation.Content>
|
||||
|
||||
</Navigation>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="grid-background -z-10 bg-surface-50/20"></div>
|
||||
@@ -1,3 +1,4 @@
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
<h1>IF YOU READ THIS, YOU'RE GAY</h1>
|
||||
|
||||
|
||||
<button type="button" class="btn preset-filled-primary-500">Button</button>
|
||||
5
front/src/routes/courses/+page.svelte
Normal file
5
front/src/routes/courses/+page.svelte
Normal file
@@ -0,0 +1,5 @@
|
||||
<main class="h-full w-full p-0 m-0">
|
||||
<div class="w-full h-10/100 preset-filled-primary-500 border-b-2 content-center">
|
||||
<h1 class="h3 ml-3 text-primary-900"> Truk à acheter</h1>
|
||||
</div>
|
||||
</main>
|
||||
@@ -1,8 +1,23 @@
|
||||
@import 'tailwindcss';
|
||||
@plugin '@tailwindcss/forms';
|
||||
@plugin '@tailwindcss/typography';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@import '@skeletonlabs/skeleton';
|
||||
@import '@skeletonlabs/skeleton-svelte';
|
||||
@import '@skeletonlabs/skeleton/themes/cerberus';
|
||||
@import '@skeletonlabs/skeleton/themes/mona';
|
||||
@import '@skeletonlabs/skeleton/themes/concord';
|
||||
@import '../goupiliot';
|
||||
|
||||
|
||||
.grid-background {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(to right, #80808012 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #80808012 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
z-index: -1;
|
||||
|
||||
}
|
||||
75
front/src/routes/taches/+page.svelte
Normal file
75
front/src/routes/taches/+page.svelte
Normal file
@@ -0,0 +1,75 @@
|
||||
<script>
|
||||
import { ChevronDownIcon, Inspect } from 'lucide-svelte';
|
||||
import { Accordion } from '@skeletonlabs/skeleton-svelte';
|
||||
import { slide } from 'svelte/transition';
|
||||
import { Switch } from '@skeletonlabs/skeleton-svelte';
|
||||
|
||||
const tasks = {
|
||||
"Be gay" : {
|
||||
"done" : false,
|
||||
"desc" : "and do crimes"
|
||||
},
|
||||
"Eat the rich" : {
|
||||
"done" : false,
|
||||
"desc" : "nothing else to say"
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$: {
|
||||
console.log('Tasks updated:', tasks);
|
||||
const completed = Object.entries(tasks).filter(([_, t]) => t.done);
|
||||
console.log('Completed count:', completed.length);
|
||||
}
|
||||
|
||||
</script>
|
||||
<main class="h-full w-full p-0 m-0">
|
||||
<div class="w-full h-10/100 preset-filled-primary-500 border-b-2 content-center">
|
||||
<h1 class="h3 ml-3 text-primary-900"> Truk a faire</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex-columns justify-stretch w-95/100">
|
||||
<Accordion multiple class="m-3">
|
||||
|
||||
{#each Object.entries(tasks) as [name, info]}
|
||||
<div class="card lg:ml-30 lg:mr-30 bg-primary-400/50 text-left border flex flex-row justify-between">
|
||||
|
||||
<Switch class="m-3"
|
||||
checked={info.done}
|
||||
onCheckedChange={(e) => { info.done = e.checked; }}>
|
||||
<Switch.Control class="preset-filled-surface-500 data-[state=checked]:preset-filled-secondary-500">
|
||||
<Switch.Thumb />
|
||||
</Switch.Control>
|
||||
<Switch.HiddenInput />
|
||||
</Switch>
|
||||
|
||||
<div class="w-full m-3">
|
||||
<Accordion.Item value={name}>
|
||||
<h3>
|
||||
<Accordion.ItemTrigger class="hover:preset-tonal font-bold flex items-center justify-between gap-2">
|
||||
{name}
|
||||
<Accordion.ItemIndicator class="group">
|
||||
<ChevronDownIcon class="h-5 w-5 transition group-data-[state=open]:rotate-180" />
|
||||
</Accordion.ItemIndicator>
|
||||
</Accordion.ItemTrigger>
|
||||
</h3>
|
||||
<Accordion.ItemContent>
|
||||
{#snippet element(attributes)}
|
||||
{#if !attributes.hidden}
|
||||
<div {...attributes} transition:slide={{ duration: 50 }}>
|
||||
{info.desc}
|
||||
</div>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</Accordion.ItemContent>
|
||||
</Accordion.Item>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
{/each}
|
||||
</Accordion>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user