Merge pull request abue-ammar#6 from abue-ammar/ui-migration

UI migration

Author: abue-ammar

package-lock.json

@@ -11,6 +11,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package.json

@@ -1,16 +1,19 @@
-import Footer from "./components/Footer";
-import Header from "./components/Header";
-import MainContent from "./components/MainContent";
+import Footer from "./components/footer";
+import Header from "./components/header";
+import ImageCompressor from "./components/image-compressor";
+import { ThemeProvider } from "./components/theme-provider";
 
 function App() {
   return (
-    <div className="relative flex min-h-screen flex-col">
-      <Header />
-      <main className="flex-1">
-        <MainContent />
-      </main>
-      <Footer />
-    </div>
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <div className="relative flex min-h-screen flex-col">
+        <Header />
+        <main className="flex-1">
+          <ImageCompressor />
+        </main>
+        <Footer />
+      </div>
+    </ThemeProvider>
   );
 }
 

src/App.tsx

@@ -1,14 +1,14 @@
 const Footer = () => {
   return (
-    <footer className="container mx-auto flex items-center justify-center px-4 py-2 text-center text-black">
+    <footer className="bg-background text-foreground container mx-auto flex items-center justify-center px-4 py-2 text-center">
       <span className="inline-flex gap-x-1">
         Built with{" "}
         <span>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
             fill="currentColor"
-            className="h-5 w-5"
+            className="text-primary h-5 w-5"
           >
             <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
           </svg>
@@ -17,7 +17,7 @@ const Footer = () => {
         <a
           target="_blank"
           href="https://github.com/abue-ammar"
-          className="text-black underline"
+          className="text-primary hover:text-primary-foreground underline transition-colors"
         >
           Abue Ammar.
         </a>

src/components/Header.tsx

@@ -0,0 +1,38 @@
+import { ThemeToggle } from "./mode-toggle";
+
+const Header = () => {
+  return (
+    <header className="bg-background text-foreground border-border sticky top-0 z-50 w-full border-b">
+      <div className="container mx-auto flex h-14 items-center px-4">
+        <div className="flex w-full items-center justify-between">
+          <div className="mr-4">
+            <a className="mr-6 flex items-center space-x-2" href="/">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="text-primary size-8"
+                viewBox="0 0 24 24"
+                strokeWidth={1.8}
+                stroke="currentColor"
+                fill="none"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M15 8h.01" />
+                <path d="M11 21h-5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v5.5" />
+                <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l2 2" />
+                <path d="M17.8 20.817l-2.172 1.138a.392 .392 0 0 1 -.568 -.41l.415 -2.411l-1.757 -1.707a.389 .389 0 0 1 .217 -.665l2.428 -.352l1.086 -2.193a.392 .392 0 0 1 .702 0l1.086 2.193l2.428 .352a.39 .39 0 0 1 .217 .665l-1.757 1.707l.414 2.41a.39 .39 0 0 1 -.567 .411l-2.172 -1.138z" />
+              </svg>
+              <span className="text-foreground text-lg font-semibold sm:inline-block">
+                Image Compressor
+              </span>
+            </a>
+          </div>
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;