+
Loading...
}>
diff --git a/src/index.css b/src/index.css
index cbec903..ed049a0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,7 +13,3 @@ code {
font-family: 'Geist Mono Variable', source-code-pro, Menlo, Monaco, Consolas,
'Courier New', monospace;
}
-
-.active {
- color: green;
-}
diff --git a/src/input.css b/src/input.css
index b5c61c9..4004786 100644
--- a/src/input.css
+++ b/src/input.css
@@ -1,3 +1,59 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 240 10% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 240 10% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 240 10% 3.9%;
+ --primary: 240 5.9% 10%;
+ --primary-foreground: 0 0% 98%;
+ --secondary: 240 4.8% 95.9%;
+ --secondary-foreground: 240 5.9% 10%;
+ --muted: 240 4.8% 95.9%;
+ --muted-foreground: 240 3.8% 46.1%;
+ --accent: 240 4.8% 95.9%;
+ --accent-foreground: 240 5.9% 10%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 5.9% 90%;
+ --input: 240 5.9% 90%;
+ --ring: 240 5.9% 10%;
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 240 10% 3.9%;
+ --foreground: 0 0% 98%;
+ --card: 240 10% 3.9%;
+ --card-foreground: 0 0% 98%;
+ --popover: 240 10% 3.9%;
+ --popover-foreground: 0 0% 98%;
+ --primary: 0 0% 98%;
+ --primary-foreground: 240 5.9% 10%;
+ --secondary: 240 3.7% 15.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 240 3.7% 15.9%;
+ --muted-foreground: 240 5% 64.9%;
+ --accent: 240 3.7% 15.9%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 3.7% 15.9%;
+ --input: 240 3.7% 15.9%;
+ --ring: 240 4.9% 83.9%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
diff --git a/src/output.css b/src/output.css
index 311bd4b..010094a 100644
--- a/src/output.css
+++ b/src/output.css
@@ -452,6 +452,38 @@ video {
display: none;
}
+:root {
+ --background: 0 0% 100%;
+ --foreground: 240 10% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 240 10% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 240 10% 3.9%;
+ --primary: 240 5.9% 10%;
+ --primary-foreground: 0 0% 98%;
+ --secondary: 240 4.8% 95.9%;
+ --secondary-foreground: 240 5.9% 10%;
+ --muted: 240 4.8% 95.9%;
+ --muted-foreground: 240 3.8% 46.1%;
+ --accent: 240 4.8% 95.9%;
+ --accent-foreground: 240 5.9% 10%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 240 5.9% 90%;
+ --input: 240 5.9% 90%;
+ --ring: 240 5.9% 10%;
+ --radius: 0.5rem;
+}
+
+* {
+ border-color: hsl(var(--border));
+}
+
+body {
+ background-color: hsl(var(--background));
+ color: hsl(var(--foreground));
+}
+
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
@@ -602,23 +634,470 @@ video {
--tw-backdrop-sepia: ;
}
+.container {
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 2rem;
+ padding-left: 2rem;
+}
+
+@media (min-width: 1400px) {
+ .container {
+ max-width: 1400px;
+ }
+}
+
+.visible {
+ visibility: visible;
+}
+
+.absolute {
+ position: absolute;
+}
+
+.relative {
+ position: relative;
+}
+
+.left-0 {
+ left: 0px;
+}
+
+.top-0 {
+ top: 0px;
+}
+
+.top-\[1px\] {
+ top: 1px;
+}
+
+.top-\[60\%\] {
+ top: 60%;
+}
+
+.top-full {
+ top: 100%;
+}
+
+.z-10 {
+ z-index: 10;
+}
+
+.z-\[1\] {
+ z-index: 1;
+}
+
+.my-6 {
+ margin-top: 1.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.mx-auto {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.ml-1 {
+ margin-left: 0.25rem;
+}
+
+.ml-6 {
+ margin-left: 1.5rem;
+}
+
+.mt-1 {
+ margin-top: 0.25rem;
+}
+
+.mt-1\.5 {
+ margin-top: 0.375rem;
+}
+
+.mt-6 {
+ margin-top: 1.5rem;
+}
+
+.flex {
+ display: flex;
+}
+
+.inline-flex {
+ display: inline-flex;
+}
+
+.grid {
+ display: grid;
+}
+
+.hidden {
+ display: none;
+}
+
+.h-1 {
+ height: 0.25rem;
+}
+
+.h-1\.5 {
+ height: 0.375rem;
+}
+
+.h-2 {
+ height: 0.5rem;
+}
+
+.h-3 {
+ height: 0.75rem;
+}
+
+.h-9 {
+ height: 2.25rem;
+}
+
+.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
+ height: var(--radix-navigation-menu-viewport-height);
+}
+
+.h-10 {
+ height: 2.5rem;
+}
+
+.h-8 {
+ height: 2rem;
+}
+
+.w-2 {
+ width: 0.5rem;
+}
+
+.w-3 {
+ width: 0.75rem;
+}
+
+.w-full {
+ width: 100%;
+}
+
+.w-max {
+ width: -webkit-max-content;
+ width: max-content;
+}
+
+.w-9 {
+ width: 2.25rem;
+}
+
+.max-w-max {
+ max-width: -webkit-max-content;
+ max-width: max-content;
+}
+
+.flex-1 {
+ flex: 1 1 0%;
+}
+
+.rotate-45 {
+ --tw-rotate: 45deg;
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
.scroll-m-20 {
scroll-margin: 5rem;
}
+.list-disc {
+ list-style-type: disc;
+}
+
+.list-none {
+ list-style-type: none;
+}
+
+.grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.items-end {
+ align-items: flex-end;
+}
+
+.items-center {
+ align-items: center;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.gap-4 {
+ gap: 1rem;
+}
+
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+ margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.overflow-hidden {
+ overflow: hidden;
+}
+
+.whitespace-nowrap {
+ white-space: nowrap;
+}
+
+.rounded-md {
+ border-radius: calc(var(--radius) - 2px);
+}
+
+.rounded-tl-sm {
+ border-top-left-radius: calc(var(--radius) - 4px);
+}
+
+.border {
+ border-width: 1px;
+}
+
+.border-b {
+ border-bottom-width: 1px;
+}
+
+.border-l-2 {
+ border-left-width: 2px;
+}
+
+.border-transparent {
+ border-color: transparent;
+}
+
+.border-input {
+ border-color: hsl(var(--input));
+}
+
+.bg-background {
+ background-color: hsl(var(--background));
+}
+
+.bg-border {
+ background-color: hsl(var(--border));
+}
+
+.bg-popover {
+ background-color: hsl(var(--popover));
+}
+
+.bg-destructive {
+ background-color: hsl(var(--destructive));
+}
+
+.bg-primary {
+ background-color: hsl(var(--primary));
+}
+
+.bg-secondary {
+ background-color: hsl(var(--secondary));
+}
+
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+.py-2 {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+}
+
+.px-2 {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+}
+
+.px-2\.5 {
+ padding-left: 0.625rem;
+ padding-right: 0.625rem;
+}
+
+.py-0 {
+ padding-top: 0px;
+ padding-bottom: 0px;
+}
+
+.py-0\.5 {
+ padding-top: 0.125rem;
+ padding-bottom: 0.125rem;
+}
+
+.px-3 {
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+}
+
+.px-8 {
+ padding-left: 2rem;
+ padding-right: 2rem;
+}
+
+.py-8 {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+}
+
+.pb-2 {
+ padding-bottom: 0.5rem;
+}
+
+.pl-6 {
+ padding-left: 1.5rem;
+}
+
+.pb-8 {
+ padding-bottom: 2rem;
+}
+
+.text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem;
+}
+
+.text-3xl {
+ font-size: 1.875rem;
+ line-height: 2.25rem;
+}
+
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
+.text-sm {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+}
+
+.text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+}
+
+.text-xs {
+ font-size: 0.75rem;
+ line-height: 1rem;
+}
+
+.text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+}
+
.font-extrabold {
font-weight: 800;
}
+.font-medium {
+ font-weight: 500;
+}
+
+.font-semibold {
+ font-weight: 600;
+}
+
+.font-bold {
+ font-weight: 700;
+}
+
+.italic {
+ font-style: italic;
+}
+
+.leading-7 {
+ line-height: 1.75rem;
+}
+
.tracking-tight {
letter-spacing: -0.025em;
}
+.text-popover-foreground {
+ color: hsl(var(--popover-foreground));
+}
+
+.text-destructive-foreground {
+ color: hsl(var(--destructive-foreground));
+}
+
+.text-foreground {
+ color: hsl(var(--foreground));
+}
+
+.text-primary-foreground {
+ color: hsl(var(--primary-foreground));
+}
+
+.text-secondary-foreground {
+ color: hsl(var(--secondary-foreground));
+}
+
+.text-muted-foreground {
+ color: hsl(var(--muted-foreground));
+}
+
+.text-primary {
+ color: hsl(var(--primary));
+}
+
+.underline-offset-4 {
+ text-underline-offset: 4px;
+}
+
+.shadow {
+ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+ --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-md {
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm {
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.outline {
+ outline-style: solid;
+}
+
+.transition {
+ transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+
+.transition-colors {
+ transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+
+.duration-300 {
+ transition-duration: 300ms;
+}
+
@-webkit-keyframes enter {
from {
opacity: var(--tw-enter-opacity, 1);
@@ -651,9 +1130,292 @@ video {
}
}
+.duration-300 {
+ -webkit-animation-duration: 300ms;
+ animation-duration: 300ms;
+}
+
+@media (min-width: 768px) {
+ .md\:container {
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 2rem;
+ padding-left: 2rem;
+ }
+
+ @media (min-width: 1400px) {
+ .md\:container {
+ max-width: 1400px;
+ }
+ }
+}
+
+.first\:mt-0:first-child {
+ margin-top: 0px;
+}
+
+.hover\:bg-accent:hover {
+ background-color: hsl(var(--accent));
+}
+
+.hover\:bg-destructive\/80:hover {
+ background-color: hsl(var(--destructive) / 0.8);
+}
+
+.hover\:bg-primary\/80:hover {
+ background-color: hsl(var(--primary) / 0.8);
+}
+
+.hover\:bg-secondary\/80:hover {
+ background-color: hsl(var(--secondary) / 0.8);
+}
+
+.hover\:bg-destructive\/90:hover {
+ background-color: hsl(var(--destructive) / 0.9);
+}
+
+.hover\:bg-primary\/90:hover {
+ background-color: hsl(var(--primary) / 0.9);
+}
+
+.hover\:text-accent-foreground:hover {
+ color: hsl(var(--accent-foreground));
+}
+
+.hover\:underline:hover {
+ -webkit-text-decoration-line: underline;
+ text-decoration-line: underline;
+}
+
+.focus\:bg-accent:focus {
+ background-color: hsl(var(--accent));
+}
+
+.focus\:text-accent-foreground:focus {
+ color: hsl(var(--accent-foreground));
+}
+
+.focus\:outline-none:focus {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-ring:focus {
+ --tw-ring-color: hsl(var(--ring));
+}
+
+.focus\:ring-offset-2:focus {
+ --tw-ring-offset-width: 2px;
+}
+
+.focus-visible\:outline-none:focus-visible {
+ outline: 2px solid transparent;
+ outline-offset: 2px;
+}
+
+.focus-visible\:ring-1:focus-visible {
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-ring:focus-visible {
+ --tw-ring-color: hsl(var(--ring));
+}
+
+.disabled\:pointer-events-none:disabled {
+ pointer-events: none;
+}
+
+.disabled\:opacity-50:disabled {
+ opacity: 0.5;
+}
+
+.data-\[active\]\:bg-accent\/50[data-active] {
+ background-color: hsl(var(--accent) / 0.5);
+}
+
+.data-\[state\=open\]\:bg-accent\/50[data-state=open] {
+ background-color: hsl(var(--accent) / 0.5);
+}
+
+.data-\[motion\^\=from-\]\:animate-in[data-motion^=from-] {
+ -webkit-animation-name: enter;
+ animation-name: enter;
+ -webkit-animation-duration: 150ms;
+ animation-duration: 150ms;
+ --tw-enter-opacity: initial;
+ --tw-enter-scale: initial;
+ --tw-enter-rotate: initial;
+ --tw-enter-translate-x: initial;
+ --tw-enter-translate-y: initial;
+}
+
+.data-\[state\=open\]\:animate-in[data-state=open] {
+ -webkit-animation-name: enter;
+ animation-name: enter;
+ -webkit-animation-duration: 150ms;
+ animation-duration: 150ms;
+ --tw-enter-opacity: initial;
+ --tw-enter-scale: initial;
+ --tw-enter-rotate: initial;
+ --tw-enter-translate-x: initial;
+ --tw-enter-translate-y: initial;
+}
+
+.data-\[state\=visible\]\:animate-in[data-state=visible] {
+ -webkit-animation-name: enter;
+ animation-name: enter;
+ -webkit-animation-duration: 150ms;
+ animation-duration: 150ms;
+ --tw-enter-opacity: initial;
+ --tw-enter-scale: initial;
+ --tw-enter-rotate: initial;
+ --tw-enter-translate-x: initial;
+ --tw-enter-translate-y: initial;
+}
+
+.data-\[motion\^\=to-\]\:animate-out[data-motion^=to-] {
+ -webkit-animation-name: exit;
+ animation-name: exit;
+ -webkit-animation-duration: 150ms;
+ animation-duration: 150ms;
+ --tw-exit-opacity: initial;
+ --tw-exit-scale: initial;
+ --tw-exit-rotate: initial;
+ --tw-exit-translate-x: initial;
+ --tw-exit-translate-y: initial;
+}
+
+.data-\[state\=closed\]\:animate-out[data-state=closed] {
+ -webkit-animation-name: exit;
+ animation-name: exit;
+ -webkit-animation-duration: 150ms;
+ animation-duration: 150ms;
+ --tw-exit-opacity: initial;
+ --tw-exit-scale: initial;
+ --tw-exit-rotate: initial;
+ --tw-exit-translate-x: initial;
+ --tw-exit-translate-y: initial;
+}
+
+.data-\[state\=hidden\]\:animate-out[data-state=hidden] {
+ -webkit-animation-name: exit;
+ animation-name: exit;
+ -webkit-animation-duration: 150ms;
+ animation-duration: 150ms;
+ --tw-exit-opacity: initial;
+ --tw-exit-scale: initial;
+ --tw-exit-rotate: initial;
+ --tw-exit-translate-x: initial;
+ --tw-exit-translate-y: initial;
+}
+
+.data-\[motion\^\=from-\]\:fade-in[data-motion^=from-] {
+ --tw-enter-opacity: 0;
+}
+
+.data-\[motion\^\=to-\]\:fade-out[data-motion^=to-] {
+ --tw-exit-opacity: 0;
+}
+
+.data-\[state\=hidden\]\:fade-out[data-state=hidden] {
+ --tw-exit-opacity: 0;
+}
+
+.data-\[state\=visible\]\:fade-in[data-state=visible] {
+ --tw-enter-opacity: 0;
+}
+
+.data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
+ --tw-exit-scale: .95;
+}
+
+.data-\[state\=open\]\:zoom-in-90[data-state=open] {
+ --tw-enter-scale: .9;
+}
+
+.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion=from-end] {
+ --tw-enter-translate-x: 13rem;
+}
+
+.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion=from-start] {
+ --tw-enter-translate-x: -13rem;
+}
+
+.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion=to-end] {
+ --tw-exit-translate-x: 13rem;
+}
+
+.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion=to-start] {
+ --tw-exit-translate-x: -13rem;
+}
+
+.group[data-state=open] .group-data-\[state\=open\]\:rotate-180 {
+ --tw-rotate: 180deg;
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@media (min-width: 640px) {
+ .sm\:grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+@media (min-width: 768px) {
+ .md\:absolute {
+ position: absolute;
+ }
+
+ .md\:mx-auto {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
+ width: var(--radix-navigation-menu-viewport-width);
+ }
+
+ .md\:w-auto {
+ width: auto;
+ }
+
+ .md\:grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+
+ .md\:grid-cols-6 {
+ grid-template-columns: repeat(6, minmax(0, 1fr));
+ }
+
+ .md\:grid-cols-8 {
+ grid-template-columns: repeat(8, minmax(0, 1fr));
+ }
+
+ .md\:grid-cols-10 {
+ grid-template-columns: repeat(10, minmax(0, 1fr));
+ }
+}
+
@media (min-width: 1024px) {
.lg\:text-5xl {
font-size: 3rem;
line-height: 1;
}
}
+
+.\[\&\:not\(\:first-child\)\]\:mt-6:not(:first-child) {
+ margin-top: 1.5rem;
+}
+
+.\[\&\>li\]\:mt-2>li {
+ margin-top: 0.5rem;
+}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index eb25d54..b91ff21 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -2,6 +2,8 @@ import { Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { fetchTrendingData } from 'services/fetchTrendingData';
+import { Badge } from '@/components/ui/badge';
+
const Home = () => {
const { isPending, isError, data, error } = useQuery({
queryKey: ['tranding'],
@@ -18,19 +20,25 @@ const Home = () => {
return (
-
+
+
Trending Movies and TV Shows
-
+
{data.map(movie => (
- {movie.media_type}
- {movie.title || movie.name}
-
+
+ {movie.media_type.charAt(0).toUpperCase() +
+ movie.media_type.slice(1)}
+
+
+
+ {movie.title || movie.name}
+
+
{movie.release_date
? new Date(movie.release_date).getFullYear()
: new Date(movie.first_air_date).getFullYear()}
diff --git a/src/pages/MovieDetails.jsx b/src/pages/MovieDetails.jsx
index 5073270..e49f769 100644
--- a/src/pages/MovieDetails.jsx
+++ b/src/pages/MovieDetails.jsx
@@ -23,39 +23,58 @@ const MovieDetails = () => {
return (
- Movie Details
- {data.original_title}
-
- {data.tagline}
-
+
+ {data.original_title}
+
- {data.overview}
+
+ {data.tagline}
+
- Genres
+ {data.overview}
+
+
+ Genres
+
{data.genres.map(genre => (
-
+
- {genre.name}
))}
- Production Companies
+
+ Production Companies
+
{data.production_countries.map(country => (
-
+
- {country.name}
))}
-
- Cast
+
+ Cast
+
-
- Reviews
+
+ Reviews
+
Loading subpage... }>
diff --git a/src/pages/Movies.jsx b/src/pages/Movies.jsx
index 2f30c00..602fa05 100644
--- a/src/pages/Movies.jsx
+++ b/src/pages/Movies.jsx
@@ -53,7 +53,7 @@ const Movies = () => {
return (
-
+
Search Movies
{data.map(movie => (
-
+
- {movie.media_type}
-{movie.title || movie.name}
-
+
+ {movie.media_type.charAt(0).toUpperCase() +
+ movie.media_type.slice(1)}
+
+
+
+ {movie.title || movie.name}
+
+
{movie.release_date
? new Date(movie.release_date).getFullYear()
: new Date(movie.first_air_date).getFullYear()}
diff --git a/src/pages/MovieDetails.jsx b/src/pages/MovieDetails.jsx
index 5073270..e49f769 100644
--- a/src/pages/MovieDetails.jsx
+++ b/src/pages/MovieDetails.jsx
@@ -23,39 +23,58 @@ const MovieDetails = () => {
return (
- Movie Details
- {data.original_title}
-
- {data.tagline}
-
+
+ {data.original_title}
+
- {data.overview}
+
+ {data.tagline}
+
- Genres
+ {data.overview}
+
+
+ Genres
+
{data.genres.map(genre => (
-
+
- {genre.name}
))}
- Production Companies
+
+ Production Companies
+
{data.production_countries.map(country => (
-
+
- {country.name}
))}
-
- Cast
+
+ Cast
+
-
- Reviews
+
+ Reviews
+
Loading subpage... }>
diff --git a/src/pages/Movies.jsx b/src/pages/Movies.jsx
index 2f30c00..602fa05 100644
--- a/src/pages/Movies.jsx
+++ b/src/pages/Movies.jsx
@@ -53,7 +53,7 @@ const Movies = () => {
return (
-
+
Search Movies
-
-
Loading subpage...
}>
diff --git a/src/pages/Movies.jsx b/src/pages/Movies.jsx
index 2f30c00..602fa05 100644
--- a/src/pages/Movies.jsx
+++ b/src/pages/Movies.jsx
@@ -53,7 +53,7 @@ const Movies = () => {
return (
Movie Details
- {data.original_title}
-- {data.tagline} -
++ {data.original_title} +
-{data.overview}
++ {data.tagline} +-
Genres
+{data.overview}
+ ++ Genres +
{data.genres.map(genre => ( --
+
- {genre.name}
- {country.name}
Production Companies
++ Production Companies +
{data.production_countries.map(country => ( --
+
- - Cast + + Cast +
- - Reviews + + Reviews +
-
+