From 0fa2c983e3ef9b757e065dc936813c57da511097 Mon Sep 17 00:00:00 2001 From: Sid-80 Date: Thu, 27 Jun 2024 14:28:49 +0530 Subject: [PATCH] feat: Invite others functionality (#19) --- index.html | 1 + src/components/shared/InviteForm.tsx | 61 +++++++++++++++++++++++++++ src/components/shared/InviteModal.tsx | 45 ++++++++++++++++++++ src/components/shared/LeftSidebar.tsx | 5 +++ 4 files changed, 112 insertions(+) create mode 100644 src/components/shared/InviteForm.tsx create mode 100644 src/components/shared/InviteModal.tsx diff --git a/index.html b/index.html index bc67f35..fa534cd 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + OpenGrame diff --git a/src/components/shared/InviteForm.tsx b/src/components/shared/InviteForm.tsx new file mode 100644 index 0000000..13094b8 --- /dev/null +++ b/src/components/shared/InviteForm.tsx @@ -0,0 +1,61 @@ +"use client"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; +import { Button } from "@/components/ui/button"; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; + +const formSchema = z.object({ + email: z.string().min(2).max(50).email(), +}); + + + +export default function InviteForm() { + + const form = useForm>({ + resolver: zodResolver(formSchema), + defaultValues: { + email: "", + }, + }); + + + const onSubmit = async(values: z.infer) => { + console.log(values) + } + return ( +
+ + ( + + Email + + + + + + )} + /> + + + + ); +} diff --git a/src/components/shared/InviteModal.tsx b/src/components/shared/InviteModal.tsx new file mode 100644 index 0000000..e1117e3 --- /dev/null +++ b/src/components/shared/InviteModal.tsx @@ -0,0 +1,45 @@ +"use client" +import { Share2Icon, UserPlus2Icon } from "lucide-react"; +import { + Dialog, + DialogContent, + DialogFooter, + DialogHeader, + DialogTrigger, +} from "../ui/dialog"; +import InviteForm from "./InviteForm"; +import { Button } from "../ui/button"; + +export default function InviteModal() { + + const shareData = { + title: "Invite Friends!!", + text: "OpenGrame is a modern social media app that allows users to connect, share, and explore content in a seamless and engaging way.", + url: `${window.location.href}`, + }; + + const shareHandler = async() => { + await navigator.share(shareData); + } + + return ( + + + {" "} + Invite + + + + Invite Friends + + + + + + + + ); +} diff --git a/src/components/shared/LeftSidebar.tsx b/src/components/shared/LeftSidebar.tsx index ad7a1a6..b991e62 100644 --- a/src/components/shared/LeftSidebar.tsx +++ b/src/components/shared/LeftSidebar.tsx @@ -2,6 +2,7 @@ import { Link, NavLink, useLocation } from "react-router-dom"; import { useUserContext } from "@/context/AuthContext"; import { sidebarLinks } from "@/constants"; import { INavLink } from "@/types"; +import InviteModal from "./InviteModal"; const LeftSidebar = () => { const { user } = useUserContext(); @@ -58,6 +59,10 @@ const LeftSidebar = () => { ); })} + +
  • + +