From 6d7b805ed24be875c5b451f841f3ad38d1cb7c97 Mon Sep 17 00:00:00 2001 From: Boostvolt <51777660+boostvolt@users.noreply.github.com> Date: Sun, 6 Aug 2023 20:06:03 +0200 Subject: [PATCH 1/2] feat: add more gradients and adjust footer opacity [NOTICKET] --- app/layout.tsx | 4 ++-- app/page.tsx | 13 ++++++++----- public/assets/gradients/32.png | Bin 0 -> 400626 bytes public/assets/gradients/33.png | Bin 0 -> 397326 bytes public/assets/gradients/34.png | Bin 0 -> 409919 bytes public/assets/gradients/35.png | Bin 0 -> 451520 bytes public/assets/gradients/36.png | Bin 0 -> 443515 bytes public/assets/gradients/37.png | Bin 0 -> 413500 bytes public/assets/gradients/38.png | Bin 0 -> 429968 bytes public/assets/gradients/39.png | Bin 0 -> 484920 bytes 10 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 public/assets/gradients/32.png create mode 100644 public/assets/gradients/33.png create mode 100644 public/assets/gradients/34.png create mode 100644 public/assets/gradients/35.png create mode 100644 public/assets/gradients/36.png create mode 100644 public/assets/gradients/37.png create mode 100644 public/assets/gradients/38.png create mode 100644 public/assets/gradients/39.png diff --git a/app/layout.tsx b/app/layout.tsx index bee4826..5c80e96 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,7 +3,7 @@ import { ThemeProvider } from "@/components/theme-provider" import "@/styles/globals.css" export const metadata: Metadata = { - title: "iCover", + title: "iCover - Apple-Style Cover Creator", description: "Design a captivating and visually appealing cover artwork for your Apple Music playlist to engage listeners and convey the theme or mood of the curated songs.", keywords: [ @@ -50,7 +50,7 @@ export const metadata: Metadata = { ], authors: [{ name: "Boostvolt", url: "https://github.com/boostvolt" }], openGraph: { - title: "iCover", + title: "iCover - Apple-Style Cover Creator", description: "Design a captivating and visually appealing cover artwork for your Apple Music playlist to engage listeners and convey the theme or mood of the curated songs.", url: "https://icover.vercel.app", diff --git a/app/page.tsx b/app/page.tsx index 0339b2f..71e4eff 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -39,6 +39,8 @@ const formSchema = z.object({ }) export default function Home() { + + const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: formSchema.parse({ @@ -50,6 +52,8 @@ export default function Home() { gradient: "0", }), }) + const { dirtyFields } = form.formState + const isEdited = dirtyFields.bigTitle ?? dirtyFields.subTitle ?? dirtyFields.footer const handleDownload = () => { const element = document.getElementById("coverElement") @@ -127,15 +131,15 @@ export default function Home() { )} {/* Big Title */}
-

{form.watch("bigTitle")}

+

{isEdited ? form.watch("bigTitle") : "Big Title"}

{/* Sub Title */}
-

{form.watch("subTitle")}

+

{isEdited ? form.watch("subTitle") : "Sub Title"}

{/* Footer */}
-

{form.watch("footer")}

+

{isEdited ? form.watch("footer") : "Footer"}

@@ -215,7 +219,6 @@ export default function Home() { Color - Image @@ -232,7 +235,7 @@ export default function Home() { defaultValue={field.value} className="grid grid-cols-5 gap-4" > - {[...Array(30)].map((_, index) => ( + {[...Array(40)].map((_, index) => (