Some of gold

Author: iimazin11

app/api/profile-image/route.js

@@ -7,23 +7,24 @@ const calculateUserXp = (xp) => Math.floor(xp / 1000);
 // XP required to reach level L (linear): 1000 * L
 const xpForLevel = (lvl) => 1000 * lvl;
 const formatNumber = (num) => {
-  if (num >= 1000000000) return (num / 1000000000).toFixed(1) + "B";
-  if (num >= 1000000) return (num / 1000000).toFixed(1) + "M";
-  if (num >= 1000) return (num / 1000).toFixed(1) + "k";
+  if (num >= 1_000_000_000) return Math.floor(num / 100_000_000) / 10 + "B";
+  if (num >= 1_000_000) return Math.floor(num / 100_000) / 10 + "M";
+  if (num >= 1_000) return Math.floor(num / 100) / 10 + "k";
   return num.toString();
 };
 
+
 // 🎭 FAKE DATA - للعرض التجريبي فقط
 const FAKE_USER_DATA = {
-  displayName: "マゼン",
+  displayName: "mazinx",
   username: "mz_n",
   xp: 45750,
   credits: 1250000,
   reputation: 99,
   about:
     "Professional gamer and anime lover 🎮✨ | Building the best Discord community | Coffee addict ☕",
-  rank: 127,
-  avatar: "https://cdn.discordapp.com/avatars/618078478755037185/4336843200bf2537f6cd773e3ddd6bd2.png?size=1024",
+  rank: 1,
+  avatar: "https://cdn.discordapp.com/avatars/618078478755037185/6eb3714acb606504d5d1e63bc98c368a.png?size=1024",
 };
 
 export async function GET() {
@@ -32,8 +33,8 @@ export async function GET() {
     const user = FAKE_USER_DATA;
 
     const level = calculateUserXp(user.xp);
-    const currentXP = user.xp - xpForLevel(level);
-    const totalXP = xpForLevel(level + 1) - xpForLevel(level);
+    const currentXP = user.xp ;
+    const totalXP = xpForLevel(level + 1);
 
     // Create canvas with custom profile dimensions
     const canvas = createCanvas(549, 548);
@@ -220,9 +221,7 @@ export async function GET() {
 
     // Draw text with stroke
     ctx.lineWidth = 2;
-    ctx.strokeStyle = "rgba(0,0,0,0.45)";
     ctx.fillStyle = "#fff";
-    ctx.strokeText(text, textX, textY);
     ctx.fillText(text, textX, textY);
 
     ctx.fillStyle = "rgba(255, 255, 255, 0.95)";
@@ -492,7 +491,7 @@ export async function GET() {
     // central progress text with outline for readability
     const progressText = `${formatNumber(currentXP)} / ${formatNumber(totalXP)}`;
     ctx.lineWidth = 1.8;
-    ctx.strokeStyle = "rgba(0,0,0,0.48)";
+  
     ctx.strokeText(progressText, canvas.width / 2, progressBarY + 10);
     ctx.fillText(progressText, canvas.width / 2, progressBarY + 10);
 

app/dashboard/page.jsx

@@ -6,48 +6,79 @@ import { motion, AnimatePresence } from "framer-motion";
 import { LogOut, LayoutDashboard } from "lucide-react"
 import Page from "@/components/dashboard/page";
 import ChartAreaDefault from "@/components/dashboard/chart-area";
+import Link from "next/link";
 import { useState, useEffect } from "react";
+
 export default function Dashboard() {
   const [imgUrl, setImgUrl] = useState(null);
 
   useEffect(() => {
     const fetchImage = async () => {
       try {
-        const res = await fetch('/api/profile-image'); // API يولد الصورة
-        const blob = await res.blob();
-        const url = URL.createObjectURL(blob);
-        setImgUrl(url);
+        const res = await fetch('/api/profile-image');
+        const arrayBuffer = await res.arrayBuffer(); 
+        const base64 = btoa(
+          new Uint8Array(arrayBuffer).reduce(
+            (data, byte) => data + String.fromCharCode(byte),
+            ''
+          )
+        );
+        setImgUrl(`data:image/png;base64,${base64}`);
       } catch (e) {
         console.error(e);
       }
     };
-
+  
     fetchImage();
-    return () => {
-      if (imgUrl) URL.revokeObjectURL(imgUrl);
-    };
   }, []);
+
+  const addCommas = (num) => {
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  };
+  
+  const formatted = addCommas("1250000")
+  
   return (
     <Page>
 
       <div className="flex flex-col md:flex-row md:items-center gap-1 md:gap-4 mb-4">
+      <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.6, delay: 1 * 0.1 }}>
         <h2 className="text-white flex space-x-2 font-medium text-lg md:text-xl">
           <LayoutDashboard className="h-6 w-6" />
           <span>Overview</span>
         </h2>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.6, delay: 2 * 0.1 }}>
         <span className="hidden md:block w-px h-4 bg-[#5b5683]"></span>
-
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.6, delay: 3 * 0.1 }}>
         <span className="text-md text-zinc-400">
           The Overview page gives you a quick glance at your most important information and activities, all in one place. It’s designed to help you stay on top of your account without needing to jump between different sections.
         </span>
+        </motion.div>
       </div>
+      <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.6, delay: 4 * 0.1 }}
+          >
       <hr className="border-[#373450] mb-4" />
+      </motion.div>
 
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         <motion.div
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.6, delay: 1 * 0.2 }}
+          transition={{ duration: 0.6, delay: 5 * 0.1 }}
           className="bg-[#1b1922]/50 backdrop-blur p-3 sm:p-4 sm:py-2 rounded-md border border-[#2e2b41]"
         >
           <div className="flex items-center  gap-2 justify-between sm:gap-3">
@@ -63,15 +94,15 @@ export default function Dashboard() {
           </div>
 
           <p className=" text-xl sm:text-2xl font-semibold break-words">
-            0
+          {formatted}
           </p>
         </motion.div>
 
 
         <motion.div
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.6, delay: 2 * 0.2 }}
+          transition={{ duration: 0.6, delay: 6 * 0.1 }}
           className="bg-[#1b1922]/50 backdrop-blur p-3 sm:p-4 sm:py-2 rounded-md border border-[#2e2b41]"
         >
           <div className="flex items-center  gap-2 justify-between sm:gap-3">
@@ -87,14 +118,14 @@ export default function Dashboard() {
           </div>
 
           <p className=" text-xl sm:text-2xl font-semibold break-words">
-            0
+            45
           </p>
         </motion.div>
 
         <motion.div
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.6, delay: 3 * 0.2 }}
+          transition={{ duration: 0.6, delay: 7 * 0.1 }}
           className="bg-[#1b1922]/50 backdrop-blur p-3 sm:p-4 sm:py-2 rounded-md border border-[#2e2b41]"
         >
           <div className="flex items-center  gap-2 justify-between sm:gap-3">
@@ -110,14 +141,14 @@ export default function Dashboard() {
           </div>
 
           <p className=" text-xl sm:text-2xl font-semibold break-words">
-            0
+            99
           </p>
         </motion.div>
 
         <motion.div
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.6, delay: 4 * 0.2 }}
+          transition={{ duration: 0.6, delay: 8 * 0.1 }}
           className="bg-[#1b1922]/50 backdrop-blur p-3 sm:p-4 sm:py-2 rounded-md border border-[#2e2b41]"
         >
           <div className="flex items-center  gap-2 justify-between sm:gap-3">
@@ -133,7 +164,7 @@ export default function Dashboard() {
           </div>
 
           <p className=" text-xl sm:text-2xl font-semibold break-words">
-            0
+            #1
           </p>
         </motion.div>
       </div>
@@ -142,7 +173,7 @@ export default function Dashboard() {
         <motion.div
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.6, delay: 0.4 }}
+          transition={{ duration: 0.6, delay: 9 * 0.1 }}
           className="flex-1 min-w-0"
         >
           <ChartAreaDefault />
@@ -151,21 +182,32 @@ export default function Dashboard() {
         <motion.div
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 0.6, delay: 0.4 }}
+          transition={{ duration: 0.6, delay: 10 * 0.1 }}
           className="flex-shrink-0 w-full lg:w-[420px] xl:w-[500px] h-full"
         >
-          <div className="bg-[#1b1922]/50 border border-[#2e2b41] p-6 rounded-lg flex flex-col items-center md:h-[34.2rem]">
-            <h3 className="text-xl text-gray-200 font-semibold mb-6">Profile</h3>
+          <div className="bg-[#1b1922]/50 border border-[#2e2b41] p-6 rounded-lg flex flex-col  md:h-[34.5rem]">
+            <div className="flex justify-between">
+              <h3 className="text-xl text-gray-200 font-semibold mb-6">Profile</h3>
+              <div className="group">
+                <Link href="/dashboard/store/profile" className=" flex space-x-1 p-1.5 bg-[#4f39f65d] rounded-xl cursor-pointer -translate-y-2 border-2 border-indigo-600 group-hover:bg-indigo-600  transition-all duration-300 ">
+                  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24"><g fill="currentColor" fillRule="evenodd" clipRule="evenodd"><path d="M11.32 6.176H5c-1.105 0-2 .949-2 2.118v10.588C3 20.052 3.895 21 5 21h11c1.105 0 2-.948 2-2.118v-7.75l-3.914 4.144A2.46 2.46 0 0 1 12.81 16l-2.681.568c-1.75.37-3.292-1.263-2.942-3.115l.536-2.839c.097-.512.335-.983.684-1.352z"></path><path d="M19.846 4.318a2.2 2.2 0 0 0-.437-.692a2 2 0 0 0-.654-.463a1.92 1.92 0 0 0-1.544 0a2 2 0 0 0-.654.463l-.546.578l2.852 3.02l.546-.579a2.1 2.1 0 0 0 .437-.692a2.24 2.24 0 0 0 0-1.635M17.45 8.721L14.597 5.7L9.82 10.76a.54.54 0 0 0-.137.27l-.536 2.84c-.07.37.239.696.588.622l2.682-.567a.5.5 0 0 0 .255-.145l4.778-5.06Z"></path></g></svg>
+                  <span className="mt-1">Edit Profile</span>
+                </Link>
+              </div>
+            </div>
 
             {imgUrl ? (
               <img
                 src={imgUrl}
                 alt="Profile Image"
-                className="w-full h-full max-h-[550px] rounded-lg object-cover shadow-lg transition-transform hover:scale-[1.03] duration-300"
+                draggable={false}
+                onContextMenu={(e) => e.preventDefault()} 
+                className="w-full select-none h-full max-h-[550px] rounded-lg object-cover shadow-lg transition-transform hover:scale-[1.03] duration-300"
               />
             ) : (
               <div className="w-full h-full max-h-[550px] bg-[#2a2835] rounded-lg animate-pulse" />
             )}
+
           </div>
         </motion.div>
       </div>

app/layout.js

@@ -20,20 +20,20 @@ export default function RootLayout({ children }) {
         <meta name="theme-color" content="#4f39f6" />
 
         {/* Favicon */}
-        <link rel="icon" href="/assests/logo1.png" />
+        <link rel="icon" href="/assets/logo1.png" />
 
         {/* Open Graph (social sharing preview) */}
         <meta property="og:title" content="Muzzle Bot" />
         <meta property="og:description" content="Muzzle - Discord bot for Fun, Memes, Images, Giveaway, Economy and Anime! Muzzle serve over 117 commands!" />
-        <meta property="og:image" content="/assests/banner.png" />
+        <meta property="og:image" content="/assets/banner.png" />
         <meta property="og:type" content="website" />
         <meta property="og:url" content="https://muzzlebot.xyz/" />
 
         {/* Twitter card */}
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:title" content="Muzzle Bot" />
         <meta name="twitter:description" content="Muzzle - Discord bot for Fun, Memes, Images, Giveaway, Economy and Anime! Muzzle serve over 117 commands!" />
-        <meta name="twitter:image" content="/assests/banner.png" />
+        <meta name="twitter:image" content="/assets/banner.png" />
       </head>
       <body
         className={`tfont custom-scrollbar`}

app/page.jsx

@@ -1,103 +1,15 @@
-import Image from "next/image";
-
-export default function Home() {
+import { Particles } from "@/components/particles";
+export default function ParticlesBasic() {
   return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.js
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+    <div className="relative flex h-screen w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-slate-900 dark:bg-zinc-950 md:shadow-xl">
+    
+      <Particles
+        className="absolute inset-0"
+        quantity={100}
+        ease={80}
+        color="#ffffff"
+        refresh
+      />
     </div>
   );
 }