mirror of
https://github.com/axzilla/templui.git
synced 2025-03-14 05:17:59 +00:00
feat(spinner): split showcase
This commit is contained in:
axzilla
parent
b0a1194999
commit
32b0eda743
@ -16,7 +16,6 @@
|
||||
--color-indigo-500: oklch(0.585 0.233 277.117);
|
||||
--color-purple-500: oklch(0.627 0.265 303.9);
|
||||
--color-purple-600: oklch(0.558 0.288 302.321);
|
||||
--color-pink-500: oklch(0.656 0.241 354.308);
|
||||
--color-gray-100: oklch(0.967 0.003 264.542);
|
||||
--color-gray-200: oklch(0.928 0.006 264.531);
|
||||
--color-gray-300: oklch(0.872 0.01 258.338);
|
||||
@ -67,8 +66,6 @@
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--animate-spin: spin 1s linear infinite;
|
||||
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
--animate-bounce: bounce 1s infinite;
|
||||
--blur-xs: 4px;
|
||||
--aspect-video: 16 / 9;
|
||||
--default-transition-duration: 150ms;
|
||||
@ -400,6 +397,9 @@
|
||||
max-width: 96rem;
|
||||
}
|
||||
}
|
||||
.m-0 {
|
||||
margin: calc(var(--spacing) * 0);
|
||||
}
|
||||
.mx-2 {
|
||||
margin-inline: calc(var(--spacing) * 2);
|
||||
}
|
||||
@ -597,9 +597,6 @@
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.w-0 {
|
||||
width: calc(var(--spacing) * 0);
|
||||
}
|
||||
.w-1 {
|
||||
width: calc(var(--spacing) * 1);
|
||||
}
|
||||
@ -651,9 +648,6 @@
|
||||
.w-16 {
|
||||
width: calc(var(--spacing) * 16);
|
||||
}
|
||||
.w-24 {
|
||||
width: calc(var(--spacing) * 24);
|
||||
}
|
||||
.w-56 {
|
||||
width: calc(var(--spacing) * 56);
|
||||
}
|
||||
@ -705,9 +699,6 @@
|
||||
.max-w-xs {
|
||||
max-width: var(--container-xs);
|
||||
}
|
||||
.min-w-\[120px\] {
|
||||
min-width: 120px;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
@ -803,12 +794,6 @@
|
||||
.transform {
|
||||
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
|
||||
}
|
||||
.animate-bounce {
|
||||
animation: var(--animate-bounce);
|
||||
}
|
||||
.animate-pulse {
|
||||
animation: var(--animate-pulse);
|
||||
}
|
||||
.animate-spin {
|
||||
animation: var(--animate-spin);
|
||||
}
|
||||
@ -899,9 +884,6 @@
|
||||
.gap-8 {
|
||||
gap: calc(var(--spacing) * 8);
|
||||
}
|
||||
.gap-12 {
|
||||
gap: calc(var(--spacing) * 12);
|
||||
}
|
||||
.space-y-1 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
@ -947,13 +929,6 @@
|
||||
.gap-x-4 {
|
||||
column-gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.space-x-1 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
|
||||
margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
}
|
||||
.space-x-2 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
@ -1044,10 +1019,6 @@
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 5px;
|
||||
}
|
||||
.border-\[32px\] {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 32px;
|
||||
}
|
||||
.border-t {
|
||||
border-top-style: var(--tw-border-style);
|
||||
border-top-width: 1px;
|
||||
@ -1097,15 +1068,9 @@
|
||||
.border-transparent {
|
||||
border-color: transparent;
|
||||
}
|
||||
.border-r-transparent {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
.border-b-transparent {
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
.border-l-transparent {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.bg-\(--theme-primary\) {
|
||||
background-color: var(--theme-primary);
|
||||
}
|
||||
@ -1208,9 +1173,6 @@
|
||||
--tw-gradient-to: var(--color-purple-500);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.fill-current {
|
||||
fill: currentColor;
|
||||
}
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
@ -1415,9 +1377,6 @@
|
||||
.text-muted-foreground {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
.text-pink-500 {
|
||||
color: var(--color-pink-500);
|
||||
}
|
||||
.text-primary {
|
||||
color: var(--primary);
|
||||
}
|
||||
@ -1427,9 +1386,6 @@
|
||||
.text-primary\/90 {
|
||||
color: color-mix(in oklab, var(--primary) 90%, transparent);
|
||||
}
|
||||
.text-purple-500 {
|
||||
color: var(--color-purple-500);
|
||||
}
|
||||
.text-red-500 {
|
||||
color: var(--color-red-500);
|
||||
}
|
||||
@ -2736,18 +2692,3 @@
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: none;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,67 +0,0 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/templui/components"
|
||||
|
||||
templ SpinnerDefault() {
|
||||
<div class="flex justify-center">
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeMd,
|
||||
})
|
||||
</div>
|
||||
}
|
||||
|
||||
templ SpinnerSizes() {
|
||||
<div class="flex flex-wrap items-end justify-center gap-8">
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeSm,
|
||||
})
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeMd,
|
||||
})
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeLg,
|
||||
})
|
||||
</div>
|
||||
}
|
||||
|
||||
templ SpinnerColors() {
|
||||
<div class="flex flex-wrap items-end justify-center gap-8">
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeMd,
|
||||
Color: "text-red-500",
|
||||
})
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeMd,
|
||||
Color: "text-green-500",
|
||||
})
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeMd,
|
||||
Color: "text-blue-500",
|
||||
})
|
||||
</div>
|
||||
}
|
||||
|
||||
templ SpinnerWithText() {
|
||||
<div class="flex flex-col items-center">
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeMd,
|
||||
Text: "Loading...",
|
||||
})
|
||||
</div>
|
||||
}
|
||||
|
||||
templ SpinnerInButton() {
|
||||
@components.Button(components.ButtonProps{
|
||||
Attributes: templ.Attributes{
|
||||
"disabled": "true",
|
||||
},
|
||||
}) {
|
||||
<div class="flex items-center gap-2">
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeSm,
|
||||
Color: "text-primary-foreground",
|
||||
})
|
||||
<span>Loading</span>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
20
internal/ui/showcase/spinner_colors.templ
Normal file
20
internal/ui/showcase/spinner_colors.templ
Normal file
@ -0,0 +1,20 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/templui/components"
|
||||
|
||||
templ SpinnerColors() {
|
||||
<div class="flex flex-wrap items-end justify-center gap-8">
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeMd,
|
||||
Color: "text-red-500",
|
||||
})
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeMd,
|
||||
Color: "text-green-500",
|
||||
})
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeMd,
|
||||
Color: "text-blue-500",
|
||||
})
|
||||
</div>
|
||||
}
|
||||
9
internal/ui/showcase/spinner_default.templ
Normal file
9
internal/ui/showcase/spinner_default.templ
Normal file
@ -0,0 +1,9 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/templui/components"
|
||||
|
||||
templ SpinnerDefault() {
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeMd,
|
||||
})
|
||||
}
|
||||
19
internal/ui/showcase/spinner_in_button.templ
Normal file
19
internal/ui/showcase/spinner_in_button.templ
Normal file
@ -0,0 +1,19 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/templui/components"
|
||||
|
||||
templ SpinnerInButton() {
|
||||
@components.Button(components.ButtonProps{
|
||||
Attributes: templ.Attributes{
|
||||
"disabled": "true",
|
||||
},
|
||||
}) {
|
||||
<div class="flex items-center gap-2">
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeSm,
|
||||
Color: "text-primary-foreground",
|
||||
})
|
||||
<span>Loading</span>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
17
internal/ui/showcase/spinner_sizes.templ
Normal file
17
internal/ui/showcase/spinner_sizes.templ
Normal file
@ -0,0 +1,17 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/templui/components"
|
||||
|
||||
templ SpinnerSizes() {
|
||||
<div class="flex flex-wrap items-end justify-center gap-8">
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeSm,
|
||||
})
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeMd,
|
||||
})
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeLg,
|
||||
})
|
||||
</div>
|
||||
}
|
||||
10
internal/ui/showcase/spinner_with_text.templ
Normal file
10
internal/ui/showcase/spinner_with_text.templ
Normal file
@ -0,0 +1,10 @@
|
||||
package showcase
|
||||
|
||||
import "github.com/axzilla/templui/components"
|
||||
|
||||
templ SpinnerWithText() {
|
||||
@components.Spinner(components.SpinnerProps{
|
||||
Size: components.SpinnerSizeMd,
|
||||
Text: "Loading...",
|
||||
})
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user