pulling products from spring api. live data

This commit is contained in:
2025-11-30 09:24:00 -05:00
parent 2441542a90
commit d53a58e994
74 changed files with 1627 additions and 538 deletions
+123 -75
View File
@@ -520,6 +520,10 @@ video {
margin-left: auto;
margin-right: auto;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
@@ -586,14 +590,17 @@ video {
.h-16 {
height: 4rem;
}
.h-full {
height: 100%;
.h-32 {
height: 8rem;
}
.h-4 {
height: 1rem;
}
.h-32 {
height: 8rem;
.h-full {
height: 100%;
}
.max-h-80 {
max-height: 20rem;
}
.min-h-screen {
min-height: 100vh;
@@ -601,15 +608,18 @@ video {
.w-16 {
width: 4rem;
}
.w-full {
width: 100%;
}
.w-4 {
width: 1rem;
}
.w-full {
width: 100%;
}
.min-w-0 {
min-width: 0px;
}
.max-w-4xl {
max-width: 56rem;
}
.max-w-6xl {
max-width: 72rem;
}
@@ -619,8 +629,8 @@ video {
.max-w-xl {
max-width: 36rem;
}
.max-w-4xl {
max-width: 56rem;
.max-w-5xl {
max-width: 64rem;
}
.flex-1 {
flex: 1 1 0%;
@@ -670,6 +680,9 @@ video {
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
overflow: hidden;
}
.overflow-y-auto {
overflow-y: auto;
}
@@ -698,12 +711,22 @@ video {
--tw-border-opacity: 1;
border-color: rgb(251 191 36 / var(--tw-border-opacity));
}
.border-amber-400\/30 {
border-color: rgb(251 191 36 / 0.3);
}
.border-amber-400\/60 {
border-color: rgb(251 191 36 / 0.6);
}
.border-amber-400\/70 {
border-color: rgb(251 191 36 / 0.7);
}
.border-green-500 {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity));
}
.border-red-500\/30 {
border-color: rgb(239 68 68 / 0.3);
}
.border-zinc-700 {
--tw-border-opacity: 1;
border-color: rgb(63 63 70 / var(--tw-border-opacity));
@@ -712,23 +735,22 @@ video {
--tw-border-opacity: 1;
border-color: rgb(39 39 42 / var(--tw-border-opacity));
}
.border-green-500 {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity));
}
.border-amber-400\/30 {
border-color: rgb(251 191 36 / 0.3);
}
.border-red-500\/30 {
border-color: rgb(239 68 68 / 0.3);
}
.bg-amber-400\/10 {
background-color: rgb(251 191 36 / 0.1);
}
.bg-amber-400\/20 {
background-color: rgb(251 191 36 / 0.2);
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-green-500\/10 {
background-color: rgb(34 197 94 / 0.1);
}
.bg-red-500\/20 {
background-color: rgb(239 68 68 / 0.2);
}
.bg-zinc-800 {
--tw-bg-opacity: 1;
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
@@ -740,6 +762,9 @@ video {
--tw-bg-opacity: 1;
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
}
.bg-zinc-900\/20 {
background-color: rgb(24 24 27 / 0.2);
}
.bg-zinc-900\/30 {
background-color: rgb(24 24 27 / 0.3);
}
@@ -752,17 +777,23 @@ video {
.bg-zinc-950\/80 {
background-color: rgb(9 9 11 / 0.8);
}
.bg-green-500\/10 {
background-color: rgb(34 197 94 / 0.1);
.bg-amber-400 {
--tw-bg-opacity: 1;
background-color: rgb(251 191 36 / var(--tw-bg-opacity));
}
.bg-amber-400\/20 {
background-color: rgb(251 191 36 / 0.2);
.bg-zinc-900\/60 {
background-color: rgb(24 24 27 / 0.6);
}
.bg-red-500\/20 {
background-color: rgb(239 68 68 / 0.2);
.bg-zinc-950 {
--tw-bg-opacity: 1;
background-color: rgb(9 9 11 / var(--tw-bg-opacity));
}
.bg-zinc-900\/20 {
background-color: rgb(24 24 27 / 0.2);
.bg-zinc-950\/70 {
background-color: rgb(9 9 11 / 0.7);
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.p-1 {
padding: 0.25rem;
@@ -779,6 +810,14 @@ video {
.p-8 {
padding: 2rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-1\.5 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
@@ -787,6 +826,18 @@ video {
padding-left: 1rem;
padding-right: 1rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
@@ -803,6 +854,10 @@ video {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
@@ -811,29 +866,9 @@ video {
padding-top: 2rem;
padding-bottom: 2rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.px-1\.5 {
padding-left: 0.375rem;
padding-right: 0.375rem;
}
.py-0 {
padding-top: 0px;
padding-bottom: 0px;
}
.py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.pr-1 {
padding-right: 0.25rem;
@@ -861,6 +896,9 @@ video {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-\[0\.65rem\] {
font-size: 0.65rem;
}
.text-\[0\.7rem\] {
font-size: 0.7rem;
}
@@ -876,8 +914,9 @@ video {
font-size: 0.75rem;
line-height: 1rem;
}
.text-\[0\.65rem\] {
font-size: 0.65rem;
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-medium {
font-weight: 500;
@@ -917,6 +956,14 @@ video {
--tw-text-opacity: 1;
color: rgb(252 211 77 / var(--tw-text-opacity));
}
.text-green-400 {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity));
}
.text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.text-zinc-300 {
--tw-text-opacity: 1;
color: rgb(212 212 216 / var(--tw-text-opacity));
@@ -937,13 +984,13 @@ video {
--tw-text-opacity: 1;
color: rgb(82 82 91 / var(--tw-text-opacity));
}
.text-green-400 {
.text-black {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity));
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.text-red-400 {
.text-zinc-200 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
color: rgb(228 228 231 / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
@@ -951,12 +998,12 @@ video {
.line-through {
text-decoration-line: line-through;
}
.opacity-40 {
opacity: 0.4;
}
.opacity-0 {
opacity: 0;
}
.opacity-40 {
opacity: 0.4;
}
.opacity-60 {
opacity: 0.6;
}
@@ -968,13 +1015,13 @@ video {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
.transition-colors {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@@ -994,6 +1041,10 @@ body {
color: rgb(250 250 250 / var(--tw-text-opacity));
}
.hover\:border-amber-400\/60:hover {
border-color: rgb(251 191 36 / 0.6);
}
.hover\:border-zinc-500:hover {
--tw-border-opacity: 1;
border-color: rgb(113 113 122 / var(--tw-border-opacity));
@@ -1004,8 +1055,8 @@ body {
border-color: rgb(82 82 91 / var(--tw-border-opacity));
}
.hover\:border-amber-400\/60:hover {
border-color: rgb(251 191 36 / 0.6);
.hover\:bg-amber-400\/10:hover {
background-color: rgb(251 191 36 / 0.1);
}
.hover\:bg-amber-400\/15:hover {
@@ -1022,8 +1073,9 @@ body {
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}
.hover\:bg-amber-400\/10:hover {
background-color: rgb(251 191 36 / 0.1);
.hover\:bg-amber-300:hover {
--tw-bg-opacity: 1;
background-color: rgb(252 211 77 / var(--tw-bg-opacity));
}
.hover\:text-amber-200:hover {
@@ -1036,14 +1088,6 @@ body {
color: rgb(212 212 216 / var(--tw-text-opacity));
}
.disabled\:cursor-not-allowed:disabled {
cursor: not-allowed;
}
.disabled\:opacity-40:disabled {
opacity: 0.4;
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
@@ -1077,6 +1121,10 @@ body {
grid-template-columns: 1fr 1fr;
}
.md\:grid-cols-\[minmax\(0\2c 2fr\)_minmax\(0\2c 1\.3fr\)\] {
grid-template-columns: minmax(0,2fr) minmax(0,1.3fr);
}
.md\:flex-row {
flex-direction: row;
}