-
-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #47 from SkidGod4444/feature/auth
add auth page
- Loading branch information
Showing
13 changed files
with
393 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| import { Button } from "@/components/ui/button"; | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardFooter, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from "@/components/ui/card"; | ||
| import { Input } from "@/components/ui/input"; | ||
| import { Label } from "@/components/ui/label"; | ||
| import { | ||
| IconBrandGoogle, | ||
| IconBrandGithub, | ||
| IconBrandDiscord, | ||
| } from "@tabler/icons-react"; | ||
|
|
||
| import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; | ||
| import React from "react"; | ||
|
|
||
| export default function Auth() { | ||
| return ( | ||
| <div className="flex flex-col h-full w-full lg:grid lg:grid-cols-2 overflow-hidden"> | ||
| <div className="flex flex-col items-center justify-center px-4 sm:px-8 py-8 lg:py-0"> | ||
| <Tabs defaultValue="signin" className="w-[350px] rounded-xl"> | ||
| <TabsList> | ||
| <TabsTrigger value="signin">SignIn</TabsTrigger> | ||
| <TabsTrigger value="signup">SignUp</TabsTrigger> | ||
| </TabsList> | ||
| <TabsContent value="signin"> | ||
| <Card className="border-none"> | ||
| <CardHeader className="p-2"> | ||
| <CardTitle className="font-bold text-xl"> | ||
| Welcome to Plura Ai | ||
| </CardTitle> | ||
| <CardDescription> | ||
| SignIn to Plura and continue managing your saas! | ||
| </CardDescription> | ||
| </CardHeader> | ||
| <CardContent className="p-2"> | ||
| <div className="flex flex-row items-center justify-between"> | ||
| <Button> | ||
| <IconBrandGoogle className="size-5" /> Google | ||
| </Button> | ||
| <Button> | ||
| {" "} | ||
| <IconBrandGithub className="size-5" /> GitHub | ||
| </Button> | ||
| <Button> | ||
| {" "} | ||
| <IconBrandDiscord className="size-5" /> Discord | ||
| </Button> | ||
| </div> | ||
| <div className="bg-gradient-to-r from-transparent via-neutral-300 dark:via-neutral-700 to-transparent my-6 h-[1px] w-full" /> | ||
| <div className="flex flex-col w-full gap-2 items-center justify-between"> | ||
| <div className="flex flex-col w-full gap-2"> | ||
| <Label htmlFor="email">Email</Label> | ||
| <Input id="email" placeholder="Email" type="email" /> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col w-full gap-2"> | ||
| <Label htmlFor="pass">Password</Label> | ||
| <Input id="pass" placeholder="Password" type="email" /> | ||
| </div> | ||
| <Button className="w-full mt-2">Continue</Button> | ||
| </div> | ||
| </CardContent> | ||
| <CardFooter className="p-0"> | ||
| <Button | ||
| variant={"ghost"} | ||
| size={"sm"} | ||
| className="hover:bg-background" | ||
| > | ||
| Forgot password | ||
| </Button> | ||
| </CardFooter> | ||
| </Card> | ||
| </TabsContent> | ||
|
|
||
| <TabsContent value="signup"> | ||
| <Card className="border-none"> | ||
| <CardHeader className="p-2"> | ||
| <CardTitle className="font-bold text-xl"> | ||
| Welcome to Plura Ai | ||
| </CardTitle> | ||
| <CardDescription> | ||
| SignIn to Plura and continue managing your saas! | ||
| </CardDescription> | ||
| </CardHeader> | ||
| <CardContent className="p-2"> | ||
| <div className="flex flex-row items-center justify-between"> | ||
| <Button> | ||
| <IconBrandGoogle className="size-5" /> Google | ||
| </Button> | ||
| <Button> | ||
| {" "} | ||
| <IconBrandGithub className="size-5" /> GitHub | ||
| </Button> | ||
| <Button> | ||
| {" "} | ||
| <IconBrandDiscord className="size-5" /> Discord | ||
| </Button> | ||
| </div> | ||
| <div className="bg-gradient-to-r from-transparent via-neutral-300 dark:via-neutral-700 to-transparent my-6 h-[1px] w-full" /> | ||
| <div className="flex flex-col w-full gap-2 items-center justify-between"> | ||
| <div className="flex flex-row items-start justify-between gap-2"> | ||
| <div className="flex flex-col gap-2"> | ||
| <Label htmlFor="firstname">First Name</Label> | ||
| <Input | ||
| id="firstname" | ||
| placeholder="First Name" | ||
| type="text" | ||
| /> | ||
| </div> | ||
| <div className="flex flex-col gap-2"> | ||
| <Label htmlFor="lastname">Last Name</Label> | ||
| <Input | ||
| id="lastname" | ||
| placeholder="Last Name" | ||
| type="text" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col w-full gap-2"> | ||
| <Label htmlFor="email">Email</Label> | ||
| <Input id="email" placeholder="Email" type="email" /> | ||
| </div> | ||
|
|
||
| <div className="flex flex-col w-full gap-2"> | ||
| <Label htmlFor="pass">Password</Label> | ||
| <Input id="pass" placeholder="Password" type="email" /> | ||
| </div> | ||
| <div className="flex flex-col w-full gap-2"> | ||
| <Label htmlFor="cnfpass">Confirm Password</Label> | ||
| <Input | ||
| id="cnfpass" | ||
| placeholder="Confirm Password" | ||
| type="email" | ||
| /> | ||
| </div> | ||
| <Button className="w-full mt-2">Continue</Button> | ||
| </div> | ||
| </CardContent> | ||
| {/* <CardFooter className="p-0"> | ||
| <Button variant={"ghost"} size={"sm"} className="hover:bg-background"> | ||
| Forgot password | ||
| </Button> | ||
| </CardFooter> */} | ||
| </Card> | ||
| </TabsContent> | ||
| </Tabs> | ||
| </div> | ||
|
|
||
| <div className="hidden md:flex items-center justify-center min-h-screen"> | ||
| <div className="flex flex-col items-center justify-center px-4 sm:px-8 py-8 lg:py-0"> | ||
| <span className="flex flex-wrap p-5 text-2xl font-bold text-black/20 dark:text-white/20 sm:text-3xl md:text-3xl lg:text-4xl xl:text-5xl"> | ||
| Talk to any website using okokoa sss okokokks sssss | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="hidden lg:block lg:absolute lg:top-0 lg:bottom-0 lg:left-1/2 lg:border-l lg:border-secondary" /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { SVGProps } from "react"; | ||
|
|
||
| export interface Iphone15ProProps extends SVGProps<SVGSVGElement> { | ||
| width?: number; | ||
| height?: number; | ||
| src?: string; | ||
| } | ||
|
|
||
| export default function Iphone15Pro({ | ||
| width = 433, | ||
| height = 882, | ||
| src, | ||
| ...props | ||
| }: Iphone15ProProps) { | ||
| return ( | ||
| <svg | ||
| width={width} | ||
| height={height} | ||
| viewBox={`0 0 ${width} ${height}`} | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| {...props} | ||
| > | ||
| <path | ||
| d="M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z" | ||
| className="fill-[#E5E5E5] dark:fill-[#404040]" | ||
| /> | ||
| <path | ||
| d="M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z" | ||
| className="fill-[#E5E5E5] dark:fill-[#404040]" | ||
| /> | ||
| <path | ||
| d="M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z" | ||
| className="fill-[#E5E5E5] dark:fill-[#404040]" | ||
| /> | ||
| <path | ||
| d="M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z" | ||
| className="fill-[#E5E5E5] dark:fill-[#404040]" | ||
| /> | ||
| <path | ||
| d="M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 432 385H430V279Z" | ||
| className="fill-[#E5E5E5] dark:fill-[#404040]" | ||
| /> | ||
| <path | ||
| d="M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z" | ||
| className="dark:fill-[#262626] fill-white" | ||
| /> | ||
| <path | ||
| opacity="0.5" | ||
| d="M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z" | ||
| className="fill-[#E5E5E5] dark:fill-[#404040]" | ||
| /> | ||
| <path | ||
| d="M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z" | ||
| className="fill-[#E5E5E5] dark:fill-[#404040] stroke-[#E5E5E5] dark:stroke-[#404040] stroke-[0.5]" | ||
| /> | ||
|
|
||
| {src && ( | ||
| <image | ||
| href={src} | ||
| x="21.25" | ||
| y="19.25" | ||
| width="389.5" | ||
| height="843.5" | ||
| preserveAspectRatio="xMidYMid slice" | ||
| clipPath="url(#roundedCorners)" | ||
| /> | ||
| )} | ||
| <path | ||
| d="M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z" | ||
| className="dark:fill-[#262626] fill-[#F5F5F5]" | ||
| /> | ||
| <path | ||
| d="M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z" | ||
| className="dark:fill-[#262626] fill-[#F5F5F5]" | ||
| /> | ||
| <path | ||
| d="M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z" | ||
| className="fill-[#E5E5E5] dark:fill-[#404040]" | ||
| /> | ||
| <defs> | ||
| <clipPath id="roundedCorners"> | ||
| <rect | ||
| x="21.25" | ||
| y="19.25" | ||
| width="389.5" | ||
| height="843.5" | ||
| rx="55.75" | ||
| ry="55.75" | ||
| /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| "use client"; | ||
|
|
||
| import { useEffect, useState } from "react"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| interface MeteorsProps { | ||
| number?: number; | ||
| } | ||
| export const Meteors = ({ number = 20 }: MeteorsProps) => { | ||
| const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>( | ||
| [], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| const styles = [...new Array(number)].map(() => ({ | ||
| top: -5, | ||
| left: Math.floor(Math.random() * window.innerWidth) + "px", | ||
| animationDelay: Math.random() * 1 + 0.2 + "s", | ||
| animationDuration: Math.floor(Math.random() * 8 + 2) + "s", | ||
| })); | ||
| setMeteorStyles(styles); | ||
| }, [number]); | ||
|
|
||
| return ( | ||
| <> | ||
| {[...meteorStyles].map((style, idx) => ( | ||
| // Meteor Head | ||
| <span | ||
| key={idx} | ||
| className={cn( | ||
| "pointer-events-none absolute left-1/2 top-1/2 size-0.5 rotate-[215deg] animate-meteor rounded-full bg-slate-500 shadow-[0_0_0_1px_#ffffff10]", | ||
| )} | ||
| style={style} | ||
| > | ||
| {/* Meteor Tail */} | ||
| <div className="pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent" /> | ||
| </span> | ||
| ))} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Meteors; |
Oops, something went wrong.