From fd8f3580ae28a28faeed1977a5b5584a636a350f Mon Sep 17 00:00:00 2001 From: listlessbird <124798751+listlessbird@users.noreply.github.com> Date: Fri, 15 Nov 2024 15:46:30 +0530 Subject: [PATCH] feat: tweak some designs --- web/src/app/(history)/history/layout.tsx | 4 +- web/src/app/(history)/history/page.tsx | 8 +- web/src/app/(main)/layout.tsx | 22 +- web/src/app/(main)/page.tsx | 46 +--- web/src/app/(main)/video-config-form.tsx | 317 ++++++++++++++--------- web/src/app/globals.css | 32 +++ web/src/components/bg-pattern.tsx | 12 + web/src/components/nav/header.tsx | 3 +- web/src/components/nav/sidenav.tsx | 4 +- 9 files changed, 263 insertions(+), 185 deletions(-) create mode 100644 web/src/components/bg-pattern.tsx diff --git a/web/src/app/(history)/history/layout.tsx b/web/src/app/(history)/history/layout.tsx index c80ddc4..0532820 100644 --- a/web/src/app/(history)/history/layout.tsx +++ b/web/src/app/(history)/history/layout.tsx @@ -1,4 +1,5 @@ import { QueryProvider } from "@/app/query-provider"; +import { BackgroundPatterns } from "@/components/bg-pattern"; import { Header } from "@/components/nav/header"; import { HeaderMobile } from "@/components/nav/header-mobile"; import { SideNav } from "@/components/nav/sidenav"; @@ -15,7 +16,8 @@ export default async function Layout({ return ( -
+
+
diff --git a/web/src/app/(history)/history/page.tsx b/web/src/app/(history)/history/page.tsx index 707e27a..60c8221 100644 --- a/web/src/app/(history)/history/page.tsx +++ b/web/src/app/(history)/history/page.tsx @@ -24,9 +24,11 @@ export default async function Home() { Generations
- }> - - +
+ }> + + +
); diff --git a/web/src/app/(main)/layout.tsx b/web/src/app/(main)/layout.tsx index 03182dc..d6cabbe 100644 --- a/web/src/app/(main)/layout.tsx +++ b/web/src/app/(main)/layout.tsx @@ -1,4 +1,5 @@ import { QueryProvider } from "@/app/query-provider"; +import { BackgroundPatterns } from "@/components/bg-pattern"; import { Header } from "@/components/nav/header"; import { HeaderMobile } from "@/components/nav/header-mobile"; import { SideNav } from "@/components/nav/sidenav"; @@ -15,15 +16,18 @@ export default async function Layout({ return ( -
- -
-
- -
- {children} -
-
+
+ +
+ +
+
+ +
+ {children} +
+
+
diff --git a/web/src/app/(main)/page.tsx b/web/src/app/(main)/page.tsx index fb2e939..7475574 100644 --- a/web/src/app/(main)/page.tsx +++ b/web/src/app/(main)/page.tsx @@ -1,51 +1,15 @@ import { VideoConfigForm } from "@/app/(main)/video-config-form"; -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "@/components/ui/card"; + import { validateRequest } from "@/lib/auth"; -import { Sparkles, Video } from "lucide-react"; export default async function Home() { const { user } = await validateRequest(); return ( -
- - - - - Sparkles - - - Create stunning short videos with the power of AI - - - -

- Welcome, {user?.username}! Get ready to transform your ideas into - captivating short videos. -

- - - - - - - - - Configure your video settings and let AI do the magic - - - - - - +
+
+ +
); } diff --git a/web/src/app/(main)/video-config-form.tsx b/web/src/app/(main)/video-config-form.tsx index 9ce2516..5c60a4e 100644 --- a/web/src/app/(main)/video-config-form.tsx +++ b/web/src/app/(main)/video-config-form.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import Image from "next/image"; -import { Clock, Loader2, Palette, Sparkles } from "lucide-react"; +import { Clock, Loader2, Palette, Sparkles, Info } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Form, @@ -15,7 +15,7 @@ import { FormLabel, FormMessage, } from "@/components/ui/form"; -import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; import { Select, SelectContent, @@ -23,7 +23,19 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; -import { Textarea } from "@/components/ui/textarea"; +import { + Card, + CardContent, + CardDescription, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; import { createVideConfigSchema, CreateVideoScriptConfig, @@ -32,13 +44,32 @@ import { useVideoConfigMutation } from "@/app/(main)/use-video-config-mutation"; import { ProgressDisplay } from "@/app/(main)/progress-display"; import { cn } from "@/lib/utils"; import { useLocalStorage } from "@/hooks/use-local-storage"; -import DummyTest from "@/app/(main)/progress-test"; const groups = [ - { value: "fairy-tale", src: "/fairy-tale.jpg" }, - { value: "anime", src: "/anime.jpg" }, - { value: "manga", src: "/manga.jpg" }, - { value: "pixel", src: "/pixel.jpg" }, + { + value: "fairy-tale", + src: "/fairy-tale.jpg", + label: "Fairy Tale", + description: "Magical and enchanted storybook style", + }, + { + value: "anime", + src: "/anime.jpg", + label: "Anime", + description: "Modern Japanese animation style", + }, + { + value: "manga", + src: "/manga.jpg", + label: "Manga", + description: "Black and white comic art style", + }, + { + value: "pixel", + src: "/pixel.jpg", + label: "Pixel Art", + description: "Retro gaming inspired pixel graphics", + }, ]; const defaultTopics = [ @@ -78,10 +109,8 @@ export function VideoConfigForm() { const onSubmit = async (values: CreateVideoScriptConfig) => { setValue(values); showStats(true); - console.log("Video Config:", values); - mutate(values, { - onSuccess(data, variables, context) { + onSuccess(data) { console.table(data); showStats(false); }, @@ -89,125 +118,157 @@ export function VideoConfigForm() { }; return ( -
- - ( - - - - Topic - - -