Merge branch 'main' of https://github.com/Shitanshukumar607/imgToSvg

Author: Shitanshukumar607

.github/workflows/build.yml

@@ -14,6 +14,6 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: "npm"
+          cache: 'npm'
       - run: npm install
       - run: npm run build

.github/workflows/eslint.yml

@@ -14,6 +14,6 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: "npm"
+          cache: 'npm'
       - run: npm install
       - run: npm run lint

.github/workflows/prettier.yml

@@ -14,6 +14,6 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: "npm"
+          cache: 'npm'
       - run: npm install
-      - run: npx prettier --check .
+      - run: npm run prettier:check

.github/workflows/typescript.yml

@@ -14,6 +14,6 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: "npm"
+          cache: 'npm'
       - run: npm install
       - run: npm run type-check

README.md

@@ -1,12 +1,12 @@
+
 # 🖼️ Image to SVG Converter
 
 A simple web app that lets users upload any image (PNG/JPG) and instantly convert it into an **SVG** file.  
-Users can **preview**, **copy the SVG code**, or **download the file** to use anywhere.
+Users can **preview**, **copy the SVG code**, or **download the file** to use anywhere.  
 
 ---
 
 ## ✨ Features
-
 - 🚀 Upload images (PNG, JPG, JPEG)
 - 🔄 Convert raster images into scalable vector graphics (SVG)
 - 👀 Live preview of the generated SVG
@@ -17,21 +17,19 @@ Users can **preview**, **copy the SVG code**, or **download the file** to use an
 ---
 
 ## 🛠️ Tech Stack
-
-- **Frontend:** React / Next.js
-- **Vectorization:** [ImageTracer.js](https://github.com/jankovicsandras/imagetracerjs)
-- **Styling:** TailwindCSS (or your chosen framework)
+- **Frontend:** React / Next.js  
+- **Vectorization:** [ImageTracer.js](https://github.com/jankovicsandras/imagetracerjs)  
+- **Styling:** TailwindCSS (or your chosen framework)  
 
 ---
 
 ## 📦 Installation
 
 Clone the repository:
-
 ```bash
 git clone https://github.com/shitanshukumar607/imgToSvg.git
 cd imgToSvg
-```
+````
 
 Install dependencies:
 
@@ -60,12 +58,14 @@ Open [http://localhost:3000](http://localhost:3000) to view the app in the brows
 
 ## 📸 Screenshots
 
+
+
 ## 🔮 Future Improvements
 
-- ✏️ Basic SVG editor (resize, recolor, simplify paths)
-- 🎨 Presets (outline only, reduced colors, full color)
-- 📂 Support batch uploads
-- 🤖 AI-assisted vectorization for complex images
+* ✏️ Basic SVG editor (resize, recolor, simplify paths)
+* 🎨 Presets (outline only, reduced colors, full color)
+* 📂 Support batch uploads
+* 🤖 AI-assisted vectorization for complex images
 
 ---
 
@@ -79,4 +79,4 @@ Contributions are welcome!
 4. Push branch (`git push origin feature-name`)
 5. Create a Pull Request
 
----
+---

app/api/upload/route.ts

@@ -48,13 +48,13 @@ export async function POST(req: Request) {
         resolve(result);
       });
       uploadStream.end(buffer);
-    },
+    }
   );
 
   const svgString = await cloudinaryToSVG(cloudinaryResponse.secure_url);
 
   return NextResponse.json(
     { url: cloudinaryResponse.secure_url, svg: svgString },
-    { status: 201 },
+    { status: 201 }
   );
 }

app/globals.css

@@ -157,9 +157,7 @@
   border: 2px solid transparent; /* creates padding */
   background-clip: padding-box;
   box-shadow: var(--sb-glow);
-  transition:
-    background-color 150ms ease,
-    transform 150ms ease;
+  transition: background-color 150ms ease, transform 150ms ease;
 }
 
 *::-webkit-scrollbar-thumb:hover {

app/layout.tsx

@@ -1,33 +1,31 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import Navbar from "@/components/NavbarComponents/Navbar";
+import { ThemeProvider } from "@/components/NavbarComponents/ThemeProvider";
+import { Space_Grotesk } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const spaceGrotesk = Space_Grotesk({
+  variable: "--font-space-grotesk",
   subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${spaceGrotesk.className} font-sans antialiased`}>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <Navbar />
+          <main>{children}</main>
+        </ThemeProvider>
       </body>
     </html>
   );

components/NavbarComponents/Navbar.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Home, ImageUp } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import ThemeToggle from "./ThemeToggle";
+
+export default function Navbar() {
+  const pathname = usePathname();
+
+  const links = [
+    { name: "Home", href: "/", icon: Home },
+    { name: "Generate", href: "/generate", icon: ImageUp },
+  ];
+
+  return (
+    <nav className="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-neutral-700 bg-white/95 dark:bg-neutral-900/95 backdrop-blur-sm">
+      <div className="flex h-16 items-center px-4 sm:px-6">
+        <div className="flex-shrink-0">
+          <Link
+            href="/"
+            className="text-lg font-bold text-slate-800 dark:text-neutral-100"
+          >
+            SVG{" "}
+            <span className="text-emerald-600 dark:text-violet-500">
+              From Img
+            </span>
+          </Link>
+        </div>
+
+        <div className="hidden md:flex items-center justify-center flex-1">
+          <div className="flex space-x-1">
+            {links.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`flex h-10 items-center px-3 py-2 text-sm font-medium rounded-md
+                    ${
+                      pathname === link.href
+                        ? "bg-emerald-100 text-emerald-700 dark:bg-violet-700/30 dark:text-violet-300"
+                        : "text-slate-500 hover:text-emerald-600 hover:bg-emerald-50 dark:text-neutral-400 dark:hover:text-violet-400 dark:hover:bg-violet-700/20"
+                    }`}
+              >
+                {link.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-2 ml-auto">
+          <ThemeToggle />
+        </div>
+      </div>
+    </nav>
+  );
+}

components/NavbarComponents/ThemeProvider.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}