✨ feat: create popup signIn

shared/widgets/navbar/components/Navbar.tsx

@@ -2,6 +2,8 @@
 import Image from "next/image";
 import NavigationLink from "./NavigationLink";
 import SignIn from "./SignIn";
+import { Dialog, DialogTrigger } from "@/shared/libs/shadcn/ui/dialog";
+import PopupWrapper from "../../signin/components/PopupWrapper";
 
 const Navbar = () => {
   return (

shared/widgets/navbar/components/SignIn.tsx

@@ -1,13 +1,22 @@
 import { Button } from "@/shared/libs/shadcn/ui/button";
+import { Dialog, DialogTrigger } from "@/shared/libs/shadcn/ui/dialog";
 import { LogIn } from "lucide-react";
+import PopupWrapper from "../../signin/components/PopupWrapper";
 
 const SignIn = () => {
   return (
     <div>
-      <Button className="cursor-pointer">
-        <LogIn />
-        Sign In
-      </Button>
+      <Dialog>
+        <form>
+          <DialogTrigger asChild>
+            <Button className="cursor-pointer">
+              <LogIn />
+              Sign In
+            </Button>
+          </DialogTrigger>
+          <PopupWrapper />
+        </form>
+      </Dialog>
     </div>
   );
 };

shared/widgets/signin/components/PopupWrapper.tsx

@@ -0,0 +1,7 @@
+import SignInCard from "./SignInCard";
+
+const PopupWrapper = () => {
+  return <SignInCard />;
+};
+
+export default PopupWrapper;

shared/widgets/signin/components/SignInCard.tsx

@@ -0,0 +1,40 @@
+import { Button } from "@/shared/libs/shadcn/ui/button";
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/libs/shadcn/ui/dialog";
+import { Input } from "@/shared/libs/shadcn/ui/input";
+import { Label } from "@/shared/libs/shadcn/ui/label";
+import { Separator } from "@/shared/libs/shadcn/ui/separator";
+
+const SignInCard = () => {
+  return (
+    <DialogContent showCloseButton={false}>
+      <DialogHeader>
+        <DialogTitle>Get Started</DialogTitle>
+        <DialogDescription>
+          Sign in to access personalized features and stay updated with the
+          latest content.
+        </DialogDescription>
+      </DialogHeader>
+      <div className="py-1">
+        <div className="grid w-full max-w-sm items-center gap-3">
+          <Label htmlFor="email">Email</Label>
+          <Input type="email" id="email" placeholder="e.g. user@example.com" />
+        </div>
+      </div>
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DialogClose>
+        <Button type="submit">Continue</Button>
+      </DialogFooter>
+    </DialogContent>
+  );
+};
+
+export default SignInCard;