gladvn 0.2.33 → 0.2.35

package/src/dev/showcase/dashboard-block.tsx

@@ -0,0 +1,77 @@
+import { BlockViewer } from "../components/BlockViewer";
+import codeString from "../../blocks/dashboard.tsx?raw";
+import { InfoIcon } from "lucide-react";
+
+export default function DashboardBlockShowcase() {
+  return (
+    <div className="space-y-8">
+      <BlockViewer 
+        blockId="dashboard" 
+        title="Dashboard" 
+        description="A full-featured dashboard layout with a responsive sidebar, header, and data visualizations."
+        codeString={codeString} 
+      />
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="rounded-2xl border border-info/30 bg-info/5 p-6 md:p-8 space-y-4 relative overflow-hidden">
+          <div className="absolute top-0 right-0 p-8 opacity-5 pointer-events-none">
+            <InfoIcon className="w-32 h-32 text-info" />
+          </div>
+          <h3 className="text-xl font-bold text-foreground flex items-center gap-2 relative z-10">
+            <InfoIcon className="size-5 text-info" />
+            Triết lý lắp ghép (Composition)
+          </h3>
+          <div className="text-muted-foreground leading-relaxed space-y-4 relative z-10">
+            <p>
+              Nhìn vào mã nguồn của Dashboard này, bạn sẽ thấy sự xuất hiện dày đặc của cả <strong>Micro</strong> (Avatar, Button, DropdownMenu...) và <strong>Macro</strong> (DatePicker).
+            </p>
+            <p>
+              gladvn khuyến khích bạn <strong>tự do kết hợp</strong> cả hai tầng kiến trúc:
+            </p>
+            <ul className="list-disc list-inside space-y-2 ml-2">
+              <li><strong>Dùng Macro</strong> khi bạn cần một khối chức năng hoàn chỉnh, hoạt động ngay lập tức (như DatePicker).</li>
+              <li><strong>Dùng Micro</strong> khi bạn cần tuỳ chỉnh sâu bố cục, hoặc xây dựng các phần tử đặc thù (như Sidebar, Header).</li>
+            </ul>
+            <p>
+              Không có ranh giới cứng nhắc. Hãy dùng kết hợp để tối ưu tốc độ phát triển mà không đánh mất sự linh hoạt!
+            </p>
+          </div>
+        </div>
+
+        <div className="rounded-2xl border border-warning/30 bg-warning/5 p-6 md:p-8 space-y-4 relative overflow-hidden">
+          <div className="absolute top-0 right-0 p-8 opacity-5 pointer-events-none">
+            <InfoIcon className="w-32 h-32 text-warning" />
+          </div>
+          <h3 className="text-xl font-bold text-foreground flex items-center gap-2 relative z-10">
+            <InfoIcon className="size-5 text-warning" />
+            Cạm bẫy "Trừu tượng hoá sớm"
+          </h3>
+          <div className="text-muted-foreground leading-relaxed space-y-4 relative z-10">
+            <p>
+              Nhiều người khi nhìn vào mã nguồn file này sẽ thắc mắc: <em>"Tại sao không tách các thẻ Card kia thành một component nhỏ hơn (ví dụ DashboardCard) cho code ngắn lại?"</em>
+            </p>
+            <p>
+              Đừng rơi vào bẫy <strong>Premature Abstraction (Trừu tượng hoá quá sớm)</strong>. Hãy tự hỏi:
+            </p>
+            <ul className="list-disc list-inside space-y-2 ml-2 font-medium text-foreground/80">
+              <li>Các Card này có thực sự được tái sử dụng ở trang khác không?</li>
+              <li>Tách ra có làm mất đi ngữ cảnh (context) khi đọc code không?</li>
+              <li>Người tiếp theo vào maintain có thể nhìn một phát hiểu ngay overview trang web, hay phải nhảy qua lại giữa 10 file nhỏ xíu chỉ để biết một cái Card chứa gì?</li>
+            </ul>
+            <p>
+              Viết code dài trong một file không xấu, nếu nó <strong>minh bạch và dễ theo dõi (transparent)</strong>. Chỉ tách component khi bạn thực sự cần tái sử dụng nó ở nhiều nơi.
+            </p>
+          </div>
+        </div>
+      </div>
+      
+      <div className="text-center pb-8 pt-4">
+        <p className="text-sm text-muted-foreground italic max-w-2xl mx-auto">
+          *P/S: Tại sao những điều này lại được viết ở Dashboard block mà không phải nơi khác? 
+          Thực ra thì chúng áp dụng cho <strong>tất cả mọi Block</strong>, tôi chỉ tình cờ chọn Dashboard làm chỗ để tâm sự mỏng thôi. 
+          Đời mà, đâu cần cái gì cũng phải phân chia hoàn hảo, thong thả đi! ☕️
+        </p>
+      </div>
+    </div>
+  );
+}

package/src/dev/showcase/overview.tsx

@@ -133,7 +133,7 @@ export default function OverviewSection() {
               Tinh tế. Đẳng cấp.
             </span>
             <span className="block mt-2 bg-gradient-to-r leading-[1.2] from-primary via-info to-primary bg-[length:200%_auto] bg-clip-text text-transparent animate-[spin_8s_linear_infinite] [animation-name:gradient] [animation-duration:8s] [animation-timing-function:linear] [animation-iteration-count:infinite]">
-              Của bạn.
+              Không giới hạn.
             </span>
           </h1>
 
@@ -151,6 +151,13 @@ export default function OverviewSection() {
               Đọc được, sửa được, xóa được.
             </strong>
           </p>
+
+          <div 
+            className="max-w-2xl text-lg md:text-xl font-medium text-foreground/90 italic mt-2 p-5 border-l-4 border-primary bg-primary/5 rounded-r-xl shadow-sm animate-fade-up"
+            style={{ animationDelay: "300ms", animationFillMode: "both" }}
+          >
+            "Thư viện này sinh ra để giúp bạn code nhanh hơn, sống nhàn hơn, đừng tự làm khó mình."
+          </div>
         </div>
 
         {/* 3D Floating Showcase Dashboard */}
@@ -308,13 +315,12 @@ export default function OverviewSection() {
       <section className="container max-w-6xl mx-auto space-y-12 px-4">
         <div className="text-center max-w-2xl mx-auto space-y-4">
           <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight">
-            Kiến trúc rõ ràng. Sửa không lo vỡ.
+            Kiến trúc rành mạch. Sửa code không "đổ mồ hôi".
           </h2>
           <p className="text-muted-foreground text-lg">
-            Nhiều dự án bắt đầu gãy ở năm thứ hai — muốn sửa mà không dám, vì
-            không biết gì sẽ vỡ theo. gladvn chia code thành{" "}
-            <strong className="text-foreground">các tầng rõ ràng</strong>
-            {", "}nên bạn luôn biết mình đang sửa ở đâu và ảnh hưởng đến đâu.
+            Nhiều dự án thường bắt đầu "bốc mùi" sau một thời gian — đụng vào đâu cũng sợ gãy, muốn sửa mà rén. gladvn chia code thành{" "}
+            <strong className="text-foreground">các tầng rạch ròi</strong>
+            {", "}giúp bạn luôn biết chính xác mình đang sửa cái gì, ảnh hưởng tới đâu. Tâm an, code mới nhàn!
           </p>
         </div>
 
@@ -413,7 +419,7 @@ export default function OverviewSection() {
             <p className="text-sm font-bold uppercase tracking-wider text-primary mb-5">
               Tuỳ chỉnh theo từng tầng kiến trúc
             </p>
-            <div className="grid sm:grid-cols-3 gap-4">
+            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
               {/* MACRO — RECOMMENDED */}
               <div className="p-5 rounded-2xl border-2 border-primary/40 bg-primary/5 space-y-3 relative">
                 <div className="absolute top-3 right-3 text-[10px] font-bold uppercase tracking-wider text-primary bg-primary/10 px-2 py-0.5 rounded-full">
@@ -423,16 +429,14 @@ export default function OverviewSection() {
                   src/components/macro/
                 </div>
                 <h4 className="font-bold text-foreground text-base">
-                  Macro — Sửa an toàn
+                  Macro — Khu vực an toàn
                 </h4>
                 <p className="text-sm text-muted-foreground leading-relaxed">
-                  Bắt đầu ở đây. Mỗi Macro là một preset độc lập — thêm footer
-                  cho DatePicker, bỏ nút đóng của Dialog, chỉnh placeholder
-                  Combobox.{" "}
+                  Muốn tuỳ chỉnh? Bắt đầu từ đây nhé. Mỗi Macro là một khối độc lập — thêm footer cho DatePicker, giấu nút đóng của Dialog, v.v.{" "}
                   <strong className="text-foreground">
-                    Sửa cái nào chỉ ảnh hưởng cái đó
+                    Cứ thoải mái vọc vạch
                   </strong>
-                  , không lan sang đâu cả.
+                  , sửa cái nào thì chỉ ảnh hưởng cái đó thôi, chả lo "cháy nhà" hàng xóm.
                 </p>
               </div>
 
@@ -445,15 +449,14 @@ export default function OverviewSection() {
                   src/components/micro/
                 </div>
                 <h4 className="font-bold text-foreground text-base">
-                  Micro — Sửa cẩn thận
+                  Micro — Lãnh địa cốt lõi
                 </h4>
                 <p className="text-sm text-muted-foreground leading-relaxed">
-                  Micro là nền — mọi Macro đều xây trên nó. Sửa variant của
-                  Button hay animation của Tooltip thì{" "}
+                  Mọi thứ đều xây từ đây. Sửa cái padding của Button hay animation của Tooltip thì{" "}
                   <strong className="text-foreground">
-                    tất cả nơi dùng component đó đều thay đổi theo
+                    nguyên dàn app sẽ ăn theo
                   </strong>
-                  . Chỉ sửa khi bạn rõ mình đang làm gì.
+                  . Cân nhắc kỹ chút trước khi gõ phím nhé, "sai một ly đi một dặm" đấy!
                 </p>
               </div>
 
@@ -466,15 +469,33 @@ export default function OverviewSection() {
                   src/index.css
                 </div>
                 <h4 className="font-bold text-foreground text-base">
-                  CSS Token — Đổi một chỗ, cả app thay đổi
+                  CSS Token — Nút bấm hạt nhân
                 </h4>
                 <p className="text-sm text-muted-foreground leading-relaxed">
-                  CSS token quyết định màu, font, border-radius cho tất cả. Đổi
-                  một token ở đây thì{" "}
+                  Nơi nắm trùm về màu sắc, font, độ bo góc. Đổi một biến ở đây là{" "}
                   <strong className="text-foreground">
-                    toàn bộ giao diện cập nhật ngay
+                    giao diện lột xác toàn tập
                   </strong>
-                  . Dùng khi muốn rebrand, không phải để vá lỗi lẻ tẻ.
+                  . Rất đã khi cần thay áo mới (rebrand), nhưng tuyệt đối đừng dùng để vá lỗi vặt.
+                </p>
+              </div>
+
+              {/* BLOCKS — FLEXIBLE COMPOSITION */}
+              <div className="p-5 rounded-2xl border border-info/40 bg-info/5 space-y-3 relative">
+                <div className="absolute top-3 right-3 text-[10px] font-bold uppercase tracking-wider text-info bg-info/10 px-2 py-0.5 rounded-full">
+                  Lắp ghép linh hoạt
+                </div>
+                <div className="font-mono text-xs text-info/70">
+                  src/blocks/
+                </div>
+                <h4 className="font-bold text-foreground text-base">
+                  Blocks — Sân chơi tự do
+                </h4>
+                <p className="text-sm text-muted-foreground leading-relaxed">
+                  Chẳng có quy tắc nào ép bạn phải dùng 100% Micro hay Macro. 
+                  Layout quen thuộc thì <strong className="text-foreground">lấy Macro ra xài cho lẹ</strong>. 
+                  Gặp thiết kế dị biệt thì <strong className="text-foreground">mở Micro ra tự xếp hình</strong>. 
+                  Linh hoạt lên, code sao cho bản thân thấy sướng là được!
                 </p>
               </div>
             </div>
@@ -489,13 +510,12 @@ export default function OverviewSection() {
             </div>
             <div className="relative z-10 space-y-4 mb-10">
               <h3 className="text-2xl md:text-4xl font-extrabold tracking-tight">
-                Micro & Macro
+                Luật chơi Micro/Macro
               </h3>
               <p className="text-muted-foreground max-w-lg text-lg leading-relaxed">
-                Micro là component thuần — chỉ lo style, không ép layout. Macro
-                là preset — lắp ghép Micro thành giao diện hoàn chỉnh.
+                Micro chỉ là những mảnh lego thuần túy — đẹp nhưng vô tri. Macro mới là người chỉ huy — sắp xếp các mảnh lego thành giao diện hoàn chỉnh.
                 <strong className="text-foreground block mt-2">
-                  Micro không bao giờ tự quyết layout. Việc đó thuộc về Macro.
+                  Micro không bao giờ được phép tự tiện lo chuyện layout (margin, width). Việc đó là của Macro!
                 </strong>
               </p>
             </div>
@@ -990,6 +1010,7 @@ export default function OverviewSection() {
           <div className="relative z-10 mt-10">
             <Button
               render={<a href="/dialog" />}
+              nativeButton={false}
               variant="outline"
               color="warning"
               className="gap-2 font-bold px-6 py-5 rounded-xl border-warning/30 bg-warning/10 hover:bg-warning/20 shadow-sm"
@@ -1087,6 +1108,7 @@ export default function OverviewSection() {
                 rel="noreferrer"
               />
             }
+            nativeButton={false}
           >
             Đóng góp cùng chúng tôi
           </Button>
@@ -1099,14 +1121,14 @@ export default function OverviewSection() {
           <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_60%_at_50%_0%,rgba(var(--primary-rgb),0.15),transparent)] pointer-events-none" />
           <div className="relative z-10 space-y-6 max-w-2xl mx-auto">
             <h2 className="text-3xl md:text-5xl font-extrabold tracking-tight">
-              30 giây. Xong.
+              30 giây là có đồ chơi.
             </h2>
             <p className="text-muted-foreground text-lg leading-relaxed">
-              Toàn bộ code nằm trong{" "}
+              Quẳng hết code vào{" "}
               <code className="text-sm bg-primary/20 text-primary px-1.5 py-0.5 rounded">
                 src/
               </code>{" "}
-              của bạn. Không config rườm rà. Chạy là dùng.
+              rồi xài thôi. Không config rườm rà nhức đầu làm gì.
             </p>
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2">
               <button
@@ -1131,6 +1153,7 @@ export default function OverviewSection() {
                     rel="noreferrer"
                   />
                 }
+                nativeButton={false}
                 variant="ghost"
                 className="text-muted-foreground hover:text-foreground"
               >

package/src/dev/showcase/settings-block.tsx

@@ -0,0 +1,13 @@
+import { BlockViewer } from "../components/BlockViewer";
+import codeString from "../../blocks/settings.tsx?raw";
+
+export default function SettingsBlockShowcase() {
+  return (
+    <BlockViewer 
+      blockId="settings" 
+      title="Settings Layout" 
+      description="A vertical tabs-based settings page with various input controls and danger zones."
+      codeString={codeString} 
+    />
+  );
+}

package/src/blocks/auth-card.tsx

@@ -1,104 +0,0 @@
-import * as React from "react";
-import { useState } from "react";
-import { Button } from "../components/micro/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/micro/card";
-import { Checkbox } from "../components/micro/checkbox";
-import { Input } from "../components/micro/input";
-import { Label } from "../components/micro/label";
-import { Separator } from "../components/micro/separator";
-
-export default function AuthCardBlock() {
-  const [isLoading, setIsLoading] = useState(false);
-  const [mode, setMode] = useState<"login" | "register">("login");
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setTimeout(() => setIsLoading(false), 1000);
-  };
-
-  return (
-    <div className="flex min-h-screen w-full items-center justify-center p-4 bg-muted/20">
-      <Card className="w-full max-w-sm">
-        <CardHeader className="text-center space-y-2">
-          <CardTitle className="text-2xl font-bold">
-            {mode === "login" ? "Welcome back" : "Create an account"}
-          </CardTitle>
-          <CardDescription>
-            {mode === "login"
-              ? "Enter your email below to login to your account"
-              : "Enter your details below to create your account"}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            {mode === "register" && (
-              <div className="space-y-2">
-                <Label htmlFor="name">Full Name</Label>
-                <Input id="name" placeholder="John Doe" required />
-              </div>
-            )}
-            <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
-              <Input id="email" type="email" placeholder="m@example.com" required />
-            </div>
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <Label htmlFor="password">Password</Label>
-                {mode === "login" && (
-                  <Button variant="link" color="primary" className="h-auto p-0 text-xs">
-                    Forgot password?
-                  </Button>
-                )}
-              </div>
-              <Input id="password" type="password" required />
-            </div>
-            
-            {mode === "register" && (
-              <div className="flex items-center gap-2">
-                <Checkbox id="terms" required />
-                <Label htmlFor="terms" className="text-sm font-normal text-muted-foreground">
-                  I agree to the <a href="#" className="text-primary hover:underline">terms and conditions</a>
-                </Label>
-              </div>
-            )}
-
-            <Button type="submit" className="w-full" disabled={isLoading}>
-              {isLoading ? "Loading..." : mode === "login" ? "Sign In" : "Create Account"}
-            </Button>
-          </form>
-
-          <div className="my-6 flex items-center gap-4">
-            <Separator className="flex-1" />
-            <span className="text-xs text-muted-foreground">OR</span>
-            <Separator className="flex-1" />
-          </div>
-
-          <Button variant="outline" className="w-full">
-            <svg viewBox="0 0 24 24" className="mr-2 size-4" fill="currentColor">
-              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
-              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
-              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
-              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
-            </svg>
-            Continue with Google
-          </Button>
-
-          <div className="mt-4 text-center text-sm">
-            <span className="text-muted-foreground">
-              {mode === "login" ? "Don't have an account? " : "Already have an account? "}
-            </span>
-            <Button
-              variant="link"
-              color="primary"
-              className="h-auto p-0"
-              onClick={() => setMode(mode === "login" ? "register" : "login")}
-            >
-              {mode === "login" ? "Sign up" : "Sign in"}
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

package/src/blocks/auth-dialog.tsx

@@ -1,116 +0,0 @@
-import * as React from "react";
-import { useState } from "react";
-import { Button } from "../components/micro/button";
-import { Checkbox } from "../components/micro/checkbox";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../components/micro/dialog";
-import { Input } from "../components/micro/input";
-import { Label } from "../components/micro/label";
-import { Separator } from "../components/micro/separator";
-
-export default function AuthDialogBlock() {
-  const [isLoading, setIsLoading] = useState(false);
-  const [mode, setMode] = useState<"login" | "register">("login");
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setTimeout(() => {
-      setIsLoading(false);
-      setIsOpen(false);
-    }, 1000);
-  };
-
-  return (
-    <div className="flex min-h-[50vh] w-full items-center justify-center p-4 bg-muted/10 border border-dashed rounded-lg">
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogTrigger render={<Button>Open Authentication</Button>} />
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader className="text-center space-y-2">
-            <DialogTitle className="text-2xl font-bold">
-              {mode === "login" ? "Welcome back" : "Create an account"}
-            </DialogTitle>
-            <DialogDescription>
-              {mode === "login"
-                ? "Enter your email below to login to your account"
-                : "Enter your details below to create your account"}
-            </DialogDescription>
-          </DialogHeader>
-
-          <form onSubmit={handleSubmit} className="space-y-4 py-4">
-            {mode === "register" && (
-              <div className="space-y-2">
-                <Label htmlFor="dialog-name">Full Name</Label>
-                <Input id="dialog-name" placeholder="John Doe" required />
-              </div>
-            )}
-            <div className="space-y-2">
-              <Label htmlFor="dialog-email">Email</Label>
-              <Input id="dialog-email" type="email" placeholder="m@example.com" required />
-            </div>
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <Label htmlFor="dialog-password">Password</Label>
-                {mode === "login" && (
-                  <Button type="button" variant="link" color="primary" className="h-auto p-0 text-xs">
-                    Forgot password?
-                  </Button>
-                )}
-              </div>
-              <Input id="dialog-password" type="password" required />
-            </div>
-            
-            {mode === "register" && (
-              <div className="flex items-center gap-2">
-                <Checkbox id="dialog-terms" required />
-                <Label htmlFor="dialog-terms" className="text-sm font-normal text-muted-foreground">
-                  I agree to the <a href="#" className="text-primary hover:underline">terms</a>
-                </Label>
-              </div>
-            )}
-
-            <Button type="submit" className="w-full" disabled={isLoading}>
-              {isLoading ? "Loading..." : mode === "login" ? "Sign In" : "Create Account"}
-            </Button>
-          </form>
-
-          <div className="flex items-center gap-4">
-            <Separator className="flex-1" />
-            <span className="text-xs text-muted-foreground uppercase">Or</span>
-            <Separator className="flex-1" />
-          </div>
-
-          <Button type="button" variant="outline" className="w-full mt-4">
-            <svg viewBox="0 0 24 24" className="mr-2 size-4" fill="currentColor">
-              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
-              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
-              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
-              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
-            </svg>
-            Google
-          </Button>
-
-          <p className="mt-4 text-center text-sm text-muted-foreground">
-            {mode === "login" ? "Don't have an account? " : "Already have an account? "}
-            <Button
-              type="button"
-              variant="link"
-              color="primary"
-              className="h-auto p-0 font-semibold"
-              onClick={() => setMode(mode === "login" ? "register" : "login")}
-            >
-              {mode === "login" ? "Sign up" : "Sign in"}
-            </Button>
-          </p>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}