feat: new states to context, local fonts, neon glow option

phukon · Jan 22, 2024 · eb91737 · eb91737
1 parent 89a1dfd
commit eb91737
Show file tree

Hide file tree

Showing 16 changed files with 188 additions and 39 deletions.
diff --git a/app/editor/Canvas.tsx b/app/editor/Canvas.tsx
@@ -144,7 +144,7 @@ const Canvas2 = () => {
               </Button>
             </div>
             <Settings />
-            <a
+            {/* <a
               style={{ boxShadow: "6px 6px 0px rgba(0, 0, 0, 1)" }}
               className="inline-flex select-none items-center border-2 dark:!shadow-none dark:!border-none group space-x-4 rounded-md px-6 py-3 text-base shadow-md sm:rounded-lg border-black text-black hover:bg-blue-100 dark:border-gray-800 dark:bg-gray-900 hover:border-blue-200 dark:hover:bg-white dark:text-gray-300 dark:hover:text-black cursor-pointer"
               href="/"
@@ -191,7 +191,7 @@ const Canvas2 = () => {
                 ></path>
               </svg>
               <span>Repository</span>
-            </a>
+            </a> */}
           </div>
         </div>
         <div className="mt-6 inline-flex flex-col space-y-1.5 text-center">

diff --git a/app/globals.css b/app/globals.css
@@ -72,6 +72,7 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-family: var(--local-orbitron);
   }
 }
 
@@ -88,16 +89,24 @@
   background-size: 20px 20px;
 }
 
-body {
-  font-family: var(--font-orbitron);
-}
-
 .custom-1 {
   font-family: var(--font-inter);
 }
 
-.--font-pixelify_sans {
-  font-family: var(--font-pixelify_sans);
+.--local-pixel1 {
+  font-family: var(--local-pixel1);
+}
+
+.--local-pixel2 {
+  font-family: var(--local-pixel2);
+}
+
+.--local-handwritten {
+  font-family: var(--local-handwritten);
+}
+
+.--local-tektur {
+  font-family: var(--local-tektur);
 }
 
 /* Modal styles */

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { orbitron, inter, pixelify_sans, tektur } from "@/fonts";
+import { localTektur, localOrbitron, localPixel1, localPixel2, localhandwritten } from "@/fonts/fonts";
 import { Toaster } from "react-hot-toast";
 
 export const metadata: Metadata = {
@@ -16,7 +16,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${orbitron.variable} ${inter.variable} ${pixelify_sans.variable} ${tektur.variable}`}
+        className={`${localTektur.variable} ${localOrbitron.variable} ${localPixel1.variable} ${localPixel2.variable} ${localhandwritten.variable}`}
       >
         <Toaster/>
         {children}

diff --git a/app/page.tsx b/app/page.tsx
@@ -7,7 +7,7 @@ import Header from "@/components/Header";
 
 export default function Home() {
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex flex-col items-center custom-orbitron">
       <SlideProvider>
       <Header isTitle={true} />
         <CaroPlay/>

diff --git a/components/Settings.tsx b/components/Settings.tsx
@@ -9,8 +9,28 @@ type SettingsProps = {
 };
 
 export default function Settings(props: SettingsProps = { className: " " }) {
-  const { quote, style, currentImage, setQuote, setStyle, setCurrentImage } =
-    useCanvas();
+  const {
+    quote,
+    style,
+    currentImage,
+    neonGlowEnabled,
+    selectedNeonGlowStyle,
+    setQuote,
+    setStyle,
+    setCurrentImage,
+    setNeonGlowEnabled,
+    setSelectedNeonGlowStyle
+  } = useCanvas();
+
+  const handleNeonGlowToggle = () => {
+    setNeonGlowEnabled(!neonGlowEnabled);
+  };
+
+  const handleNeonGlowStyleChange = (option: any) => {
+    if (option) {
+      setSelectedNeonGlowStyle(option.value);
+    }
+  };
 
   return (
     <div className={props.className}>
@@ -64,6 +84,38 @@ export default function Settings(props: SettingsProps = { className: " " }) {
           className="w-full p-2 rounded text-black text-xs font-apple2mono"
         />
       </Label>
+      <div className="mt-4">
+        <label className="flex items-center">
+          <input
+            type="checkbox"
+            className="form-checkbox"
+            checked={neonGlowEnabled}
+            onChange={handleNeonGlowToggle}
+          />
+          <span className="ml-2 text-xs">Enable Neon Glow</span>
+        </label>
+        {neonGlowEnabled && (
+          <div className="mt-2">
+            <Label text="Neon Glow Style">
+              <Select
+                defaultValue={{
+                  value: selectedNeonGlowStyle,
+                  label: selectedNeonGlowStyle,
+                }}
+                onChange={handleNeonGlowStyleChange}
+                className="w-full rounded text-black text-xs font-apple2mono"
+                options={[
+                  { value: "white", label: "white" },
+                  { value: "red", label: "Red" },
+                  { value: "green", label: "Green" },
+                  { value: "yellow", label: "Yellow" },
+                ]}
+                isSearchable={false}
+              />
+            </Label>
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/components/quote/Quote.tsx b/components/quote/Quote.tsx
@@ -1,9 +1,17 @@
 import { useCanvas, Position } from "@/context/CanvasContext";
 import Draggable from "react-draggable";
 import { useCallback } from "react";
+import { cn } from "@/lib/utils";
 
 export default function Quote() {
-  const { quote, setPosition, position } = useCanvas();
+  const {
+    quote,
+    setPosition,
+    position,
+    style,
+    selectedNeonGlowStyle,
+    neonGlowEnabled,
+  } = useCanvas();
 
   // const handleDrag = (_: any, ui: any) => {
   //   const { x, y } = ui;
@@ -48,13 +56,44 @@ export default function Quote() {
 
   return (
     <Draggable onDrag={handleDrag} bounds="parent" defaultPosition={position}>
-      <div className="text-center z-10 absolute w-fit hover:border-1 hover:rounded-lg hover:cursor-move">
+      <div
+        className={cn(
+          "text-center z-10 absolute max-w-[500px] p-10 hover:border-1 hover:rounded-lg hover:cursor-move",
+          {
+            "--local-pixel1": style === "pixel1",
+            "--local-pixel2": style === "pixel2",
+            "--local-tektur": style === "bold",
+            "--local-handwritten": style === "handwritten",
+          }
+        )}
+      >
         {quote && (
-          <span className="text-md md:text-2xl text-white text-opacity-95">
+          <span
+            className="text-md md:text-2xl text-white text-opacity-95"
+            style={{
+              textShadow: neonGlowEnabled
+                ? getNeonGlowStyle(selectedNeonGlowStyle)
+                : "none",
+                whiteSpace: "pre-wrap",
+            }}
+          >
             {quote}
           </span>
         )}
       </div>
     </Draggable>
   );
 }
+
+const getNeonGlowStyle = (style: string) => {
+  switch (style) {
+    case "red":
+      return "0 0 10px rgba(255, 0, 0, 0.8), 0 0 20px rgba(255, 0, 0, 0.8), 0 0 30px rgba(255, 0, 0, 0.8), 0 0 40px rgba(255, 0, 0, 0.8)";
+    case "yellow":
+      return "0 0 10px rgba(255, 255, 0, 0.8), 0 0 20px rgba(255, 255, 0, 0.8), 0 0 30px rgba(255, 255, 0, 0.8), 0 0 40px rgba(255, 255, 0, 0.8)";
+    case "green":
+      return "0 0 10px rgba(0, 255, 0, 0.8), 0 0 20px rgba(0, 255, 0, 0.8), 0 0 30px rgba(0, 255, 0, 0.8), 0 0 40px rgba(0, 255, 0, 0.8)";
+    default:
+      return "0 0 10px #000, 0 0 2px #fff, 0 0 3px #fff, 0 0 40px #fff";
+  }
+};
diff --git a/context/CanvasContext.tsx b/context/CanvasContext.tsx
@@ -18,9 +18,13 @@ type CanvasContextState = {
   currentImage: ImageOption;
   position: Position;
   share: boolean;
+  neonGlowEnabled: boolean;
+  selectedNeonGlowStyle: string;
   setQuote: React.Dispatch<React.SetStateAction<string>>;
   setStyle: React.Dispatch<React.SetStateAction<string>>;
   setShare: React.Dispatch<React.SetStateAction<boolean>>;
+  setNeonGlowEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectedNeonGlowStyle: React.Dispatch<React.SetStateAction<string>>
   setCurrentImage: React.Dispatch<React.SetStateAction<ImageOption>>;
   setPosition: React.Dispatch<React.SetStateAction<Position>>;
 };
@@ -33,12 +37,9 @@ export const CanvasProvider: React.FC<{ children: React.ReactNode }> = ({
   const searchParams = useSearchParams();
   const router = useRouter();
   const defaultQuote = "Your text here";
-  const defaultDescription = "e/acc";
-  const defaultStyle = "traditional";
+  const defaultStyle = "default";
+  const defaultNeonStyle = "white"
   const defaultBackground = ImageOptions[0];
-  const defaultDate = new Date(
-    `${new Date().getFullYear() + 1}-01-01T00:00:00.000Z`
-  );
 
   const setUi = useSetAtom(uiAtom);
   setUi((prev) => ({ ...prev, modal: true }));
@@ -53,6 +54,14 @@ export const CanvasProvider: React.FC<{ children: React.ReactNode }> = ({
   };
 
   // ---------------
+
+  const [neonGlowEnabled, setNeonGlowEnabled] = useState<boolean>(
+    JSON.parse(searchParams.get("neon") || "false")
+  );
+  const [selectedNeonGlowStyle, setSelectedNeonGlowStyle] = useState<string>(
+    parseString(searchParams.get("neonstyle") || defaultNeonStyle)
+  );
+
   const [share, setShare] = useState<boolean>(
     JSON.parse(searchParams.get("share") || "false")
   );
@@ -94,12 +103,14 @@ export const CanvasProvider: React.FC<{ children: React.ReactNode }> = ({
     params.set("y", position.y.toString());
     params.set("x1", position.x1.toString());
     params.set("y1", position.y1.toString());
+    params.set("neon", neonGlowEnabled.toString())
+    params.set("neonstyle", selectedNeonGlowStyle)
 
     params.set("share", share.toString());
     router.replace(`/editor?${params.toString()}`, undefined);
 
     document.title = quote;
-  }, [quote, style, currentImage.value, position, share]);
+  }, [quote, style, currentImage.value, position, share, neonGlowEnabled, selectedNeonGlowStyle]);
 
   const contextValue = {
     quote,
@@ -108,7 +119,11 @@ export const CanvasProvider: React.FC<{ children: React.ReactNode }> = ({
     ImageOptions,
     position,
     share,
+    neonGlowEnabled,
+    selectedNeonGlowStyle,
     setShare,
+    setNeonGlowEnabled,
+    setSelectedNeonGlowStyle,
     setQuote,
     setStyle,
     setCurrentImage,

diff --git a/fonts.ts b/fonts.ts
diff --git a/fonts/Caveat-VariableFont_wght.ttf b/fonts/Caveat-VariableFont_wght.ttf
diff --git a/fonts/Orbitron-VariableFont_wght.ttf b/fonts/Orbitron-VariableFont_wght.ttf
diff --git a/fonts/PixelifySans-VariableFont_wght.ttf b/fonts/PixelifySans-VariableFont_wght.ttf
diff --git a/fonts/Tektur-VariableFont_wdth,wght.ttf b/fonts/Tektur-VariableFont_wdth,wght.ttf
diff --git a/fonts/fonts.ts b/fonts/fonts.ts
@@ -0,0 +1,39 @@
+import localFont from "next/font/local";
+import { Orbitron, Tektur } from "next/font/google";
+
+// ---- local ----
+
+export const localPixel1 = localFont({
+  src: "./PixelifySans-VariableFont_wght.ttf",
+  variable: "--local-pixel1",
+});
+
+export const localPixel2 = localFont({
+  src: "./thirteen-pixel-fonts.regular.ttf",
+  variable: "--local-pixel2",
+});
+
+export const localhandwritten = localFont({
+  src: './Caveat-VariableFont_wght.ttf',
+  variable: "--local-handwritten"
+})
+
+export const localOrbitron = localFont({
+  src: "./Orbitron-VariableFont_wght.ttf",
+  variable: "--local-orbitron",
+});
+
+export const localTektur = localFont({
+  src: "./Tektur-VariableFont_wdth,wght.ttf",
+  variable: "--local-tektur",
+});
+
+
+// ------ for dev ------
+
+export const orbitron = Orbitron({
+  subsets: ["latin"],
+  variable: "--font-orbitron",
+});
+export const tektur = Tektur({ subsets: ["latin"], variable: "--font-tektur" });
+// -------
diff --git a/fonts/thirteen-pixel-fonts.regular.ttf b/fonts/thirteen-pixel-fonts.regular.ttf
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "binary-dreams",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/types/imgBuffer.ts b/types/imgBuffer.ts
@@ -5,7 +5,7 @@ export type ImageOption = {
   desc: string;
   src: string;
   value: string;
-  label: string
+  label: string;
   slug?: string;
 };
 
@@ -59,7 +59,16 @@ export const ImgData: ImageOption[] = [
   },
 ];
 
-export const draggableStyles: string[] = ["bold", "cool", "fractional", "traditional"];
+export const draggableStyles: string[] = [
+  "techno",
+  "bold",
+  "handwritten",
+  "pixel1",
+  "pixel2",
+  "default",
+];
+
+export const neonGlowStyles: string[] = ["white", "red", "green", "yellow"];
 
 export const ImageOptions: ImageOption[] = ImgData.map((options) => ({
   ...options,