Skip to content

Commit f19c8a5

Browse files
sequentersequenter
committed
Updated demo
1 parent 675a5cf commit f19c8a5

File tree

1 file changed

+82
-87
lines changed

1 file changed

+82
-87
lines changed

‎src/routes/+page.svelte‎

Lines changed: 82 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -63,44 +63,12 @@
6363
<div class="flex flex-col items-center p-5 gap-3">
6464
<div class="text-center">
6565
<h1 class="text-2xl font-bold">svelte-toasts</h1>
66-
<p>Yet another Svelte toasts library</p>
66+
<p>yet another Svelte toasts library</p>
67+
<p class="text-xs text-gray-400">push some buttons</p>
6768
</div>
6869

69-
<div class="h-96 w-full rounded-lg bg-zinc-800"></div>
70-
71-
<div class="flex w-full gap-3">
72-
<div class="grow">
73-
<div class="flex flex-col gap-3 h-full">
74-
<div
75-
class="flex flex-col gap-3 p-5 text-center rounded-lg border-2 border-dashed border-gray-500"
76-
>
77-
<h3 class="text-xl">BORDERS</h3>
78-
<ul class="list-none space-y-2">
79-
{#each borders as border}
80-
<li>
81-
<Button
82-
label={border}
83-
on:click={() => {
84-
toasts.push(border, {
85-
...toggles,
86-
type: getRandomType(),
87-
border
88-
});
89-
}}
90-
/>
91-
</li>
92-
{/each}
93-
</ul>
94-
</div>
95-
<div
96-
class="grow flex p-5 items-center justify-center rounded-lg border-2 border-dashed border-gray-500"
97-
>
98-
<span class="text-gray-500 font-medium">Made by Sequenter</span>
99-
</div>
100-
</div>
101-
</div>
102-
103-
<div class="grow flex flex-col gap-3">
70+
<div class="grid grid-cols-2 sm:grid-cols-4 w-full gap-3">
71+
<div class="flex flex-col col-span-2 sm:col-span-4 gap-3">
10472
<div
10573
class="flex flex-col gap-3 p-5 text-center rounded-lg border-2 border-dashed border-gray-500"
10674
>
@@ -114,60 +82,87 @@
11482
{/each}
11583
</ul>
11684
</div>
85+
</div>
86+
87+
<div class="flex flex-col gap-3 h-full">
88+
<div
89+
class="flex flex-col gap-3 p-5 text-center rounded-lg border-2 border-dashed border-gray-500"
90+
>
91+
<h3 class="text-xl">BORDERS</h3>
92+
<ul class="list-none space-y-2">
93+
{#each borders as border}
94+
<li>
95+
<Button
96+
label={border}
97+
on:click={() => {
98+
toasts.push(border, {
99+
...toggles,
100+
type: getRandomType(),
101+
border
102+
});
103+
}}
104+
/>
105+
</li>
106+
{/each}
107+
</ul>
108+
</div>
109+
<div
110+
class="hidden sm:flex p-5 items-center justify-center rounded-lg border-2 border-dashed border-gray-500"
111+
>
112+
<span class="text-gray-500 font-medium">Made by Sequenter</span>
113+
</div>
114+
</div>
117115

118-
<div class="flex gap-3 w-full">
119-
<div
120-
class="grow flex flex-col gap-3 p-5 text-center rounded-lg border-2 border-dashed border-gray-500"
121-
>
122-
<h3 class="text-xl">TYPES</h3>
123-
<ul class="list-none space-y-2">
124-
{#each types as { message, opts }}
125-
<li>
126-
<Button
127-
label={message}
128-
on:click={() => {
129-
toasts.push(message, {
130-
...opts,
131-
...toggles
132-
});
133-
}}
134-
/>
135-
</li>
136-
{/each}
137-
</ul>
138-
</div>
116+
<div
117+
class="flex flex-col gap-3 p-5 text-center rounded-lg border-2 border-dashed border-gray-500"
118+
>
119+
<h3 class="text-xl">TYPES</h3>
120+
<ul class="list-none space-y-2">
121+
{#each types as { message, opts }}
122+
<li>
123+
<Button
124+
label={message}
125+
on:click={() => {
126+
toasts.push(message, {
127+
...opts,
128+
...toggles
129+
});
130+
}}
131+
/>
132+
</li>
133+
{/each}
134+
</ul>
135+
</div>
139136

140-
<div
141-
class="grow flex flex-col gap-3 p-5 text-center rounded-lg border-2 border-dashed border-gray-500"
142-
>
143-
<h3 class="text-xl">POSITION</h3>
144-
<ul class="list-none space-y-2">
145-
{#each positions as pos}
146-
<li>
147-
<Button
148-
label={pos}
149-
on:click={() => {
150-
position = pos;
151-
}}
152-
/>
153-
</li>
154-
{/each}
155-
</ul>
156-
</div>
137+
<div
138+
class="flex flex-col gap-3 p-5 text-center rounded-lg border-2 border-dashed border-gray-500"
139+
>
140+
<h3 class="text-xl">POSITION</h3>
141+
<ul class="list-none space-y-2">
142+
{#each positions as pos}
143+
<li>
144+
<Button
145+
label={pos}
146+
on:click={() => {
147+
position = pos;
148+
}}
149+
/>
150+
</li>
151+
{/each}
152+
</ul>
153+
</div>
157154

158-
<div
159-
class="grow flex flex-col gap-3 p-5 text-center rounded-lg border-2 border-dashed border-gray-500"
160-
>
161-
<h3 class="text-xl">ACTIONS</h3>
162-
<ul class="list-none space-y-2">
163-
{#each actions as { label, func }}
164-
<li>
165-
<Button {label} on:click={func} />
166-
</li>
167-
{/each}
168-
</ul>
169-
</div>
170-
</div>
155+
<div
156+
class="flex flex-col gap-3 p-5 text-center rounded-lg border-2 border-dashed border-gray-500"
157+
>
158+
<h3 class="text-xl">ACTIONS</h3>
159+
<ul class="list-none space-y-2">
160+
{#each actions as { label, func }}
161+
<li>
162+
<Button {label} on:click={func} />
163+
</li>
164+
{/each}
165+
</ul>
171166
</div>
172167
</div>
173168
</div>

0 commit comments

Comments
 (0)