feat: add colors [NOTICKET]

.eslintrc.cjs → .eslintrc.js

@@ -2,12 +2,7 @@
 const fs = require("fs")
 
 module.exports = {
-  extends: [
-    "next",
-    "prettier",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:tailwindcss/recommended",
-  ],
+  extends: ["next", "prettier", "plugin:@typescript-eslint/recommended", "plugin:tailwindcss/recommended"],
   parserOptions: {
     babelOptions: {
       presets: [require.resolve("next/babel")],
@@ -73,4 +68,4 @@ function getDirectories(path) {
   return fs.readdirSync(path).filter(function (file) {
     return fs.statSync(path + "/" + file).isDirectory()
   })
-}
+}

app/page.tsx

@@ -4,6 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import html2canvas from "html2canvas"
 import { Cog, Info } from "lucide-react"
 import Image from "next/image"
+import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 import * as z from "zod"
 import AppleMusic from "@/components/icons/apple-music"
@@ -36,11 +37,10 @@ const formSchema = z.object({
   subTitle: z.string(),
   footer: z.string(),
   gradient: z.string(),
+  color: z.string(),
 })
 
 export default function Home() {
-
-
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: formSchema.parse({
@@ -50,10 +50,11 @@ export default function Home() {
       subTitle: "",
       footer: "",
       gradient: "0",
+      color: "",
     }),
   })
   const { dirtyFields } = form.formState
-  const isEdited = dirtyFields.bigTitle ?? dirtyFields.subTitle ?? dirtyFields.footer 
+  const isEdited = dirtyFields.bigTitle ?? dirtyFields.subTitle ?? dirtyFields.footer
 
   const handleDownload = () => {
     const element = document.getElementById("coverElement")
@@ -67,6 +68,10 @@ export default function Home() {
     }
   }
 
+  useEffect(() => {
+    form.setValue("color", "")
+  }, [form.watch("gradient")])
+
   return (
     <main className="flex justify-center">
       <style jsx global>{`
@@ -116,7 +121,9 @@ export default function Home() {
               <div id="coverElement" style={{ width: 300, height: 300, position: "relative" }}>
                 {/* Background Image */}
                 <Image
-                  src={`/assets/gradients/${form.watch("gradient")}.png`}
+                  src={`/assets/${
+                    form.watch("color") === "" ? `gradients/${form.watch("gradient")}` : `colors/${form.watch("color")}`
+                  }.png`}
                   loading="eager"
                   alt={`Gradient ${form.watch("gradient")}`}
                   layout="fill"
@@ -131,11 +138,15 @@ export default function Home() {
                 )}
                 {/* Big Title */}
                 <div style={{ position: "absolute", top: 55, left: 25 }}>
-                  <h1 className="text-[3em] font-semibold text-white">{isEdited ? form.watch("bigTitle") : "Big Title"}</h1>
+                  <h1 className="text-[3em] font-semibold text-white">
+                    {isEdited ? form.watch("bigTitle") : "Big Title"}
+                  </h1>
                 </div>
                 {/* Sub Title */}
                 <div style={{ position: "absolute", top: 105, left: 25 }}>
-                  <h2 className="text-[2.5em] font-thin text-white">{isEdited ? form.watch("subTitle") : "Sub Title"}</h2>
+                  <h2 className="text-[2.5em] font-thin text-white">
+                    {isEdited ? form.watch("subTitle") : "Sub Title"}
+                  </h2>
                 </div>
                 {/* Footer */}
                 <div style={{ position: "absolute", bottom: 25, left: 25 }}>
@@ -167,7 +178,11 @@ export default function Home() {
                   render={({ field }) => (
                     <FormItem>
                       <FormControl>
-                        <Switch checked={field.value} onCheckedChange={field.onChange} title="Toggle Apple Music Logo"/>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                          title="Toggle Apple Music Logo"
+                        />
                       </FormControl>
                     </FormItem>
                   )}
@@ -242,7 +257,12 @@ export default function Home() {
                               className="rounded-full border-2 border-muted bg-popover p-0.5 hover:cursor-pointer hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
                             >
                               <Avatar className="h-full w-full">
-                                <RadioGroupItem value={`${index}`} id={`${index}`} className="sr-only" title={`Gradient ${index}`}/>
+                                <RadioGroupItem
+                                  value={`${index}`}
+                                  id={`${index}`}
+                                  className="sr-only"
+                                  title={`Gradient ${index}`}
+                                />
                                 <Image
                                   src={`/assets/gradients/${index}.png`}
                                   alt={`Gradient ${index}`}
@@ -259,11 +279,45 @@ export default function Home() {
                 />
               </TabsContent>
               <TabsContent value="color" className="mt-4">
-                <Alert>
-                  <Info className="h-4 w-4" />
-                  <AlertTitle>Coming soon</AlertTitle>
-                  <AlertDescription>Color selection will be available soon.</AlertDescription>
-                </Alert>
+                <FormField
+                  control={form.control}
+                  name="color"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormControl>
+                        <RadioGroup
+                          onValueChange={field.onChange}
+                          defaultValue={field.value}
+                          className="grid grid-cols-5 gap-4"
+                        >
+                          {[...Array(7)].map((_, index) => (
+                            <Label
+                              key={index}
+                              htmlFor={`${index}`}
+                              className="rounded-full border-2 border-muted bg-popover p-0.5 hover:cursor-pointer hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:border-primary"
+                            >
+                              <Avatar className="h-full w-full">
+                                <RadioGroupItem
+                                  value={`${index}`}
+                                  id={`${index}`}
+                                  className="sr-only"
+                                  title={`Color ${index}`}
+                                />
+                                <Image
+                                  src={`/assets/colors/${index}.png`}
+                                  alt={`Color ${index}`}
+                                  width={70}
+                                  height={70}
+                                />
+                              </Avatar>
+                            </Label>
+                          ))}
+                        </RadioGroup>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+                {/* <Input id="image" type="color" /> */}
               </TabsContent>
               <TabsContent value="image" className="mt-4">
                 <Alert>