-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1b6bb03
commit 5bc0bd5
Showing
11 changed files
with
319 additions
and
52 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
211 changes: 211 additions & 0 deletions
211
apps/website/src/app/profile/create/CreateProfileForm.tsx
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,211 @@ | ||
| "use client" | ||
|
|
||
| import { useState } from "react" | ||
|
|
||
| import { Fieldset, Separator } from "@/components/ui" | ||
| import { Button } from "@/components/ui/Buttons" | ||
| import { FormWithProgress } from "@/components/ui/Forms" | ||
| import { CreditCardIcon, InfoIcon, LockIcon } from "lucide-react" | ||
| import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" | ||
| import type { IconName } from "@fortawesome/fontawesome-svg-core" | ||
| import Link from "next/link" | ||
|
|
||
| export default function CreateProfileForm() { | ||
| const [displayName, setDisplayName] = useState("") | ||
| // TODO: Check if the user has created an account, if so... redirect them to their profile | ||
| const username = "FluffyJane" | ||
|
|
||
| const [isProfileComplete, setProfileComplete] = useState(true) | ||
| const [isConnectionsComplete, setConnectionsComplete] = useState(false) | ||
| const [isAuthComplete, setAuthComplete] = useState(true) | ||
| const [isPaymentComplete, setPaymentComplete] = useState(false) | ||
|
|
||
| const progress = [ | ||
| { | ||
| item: "Profile information", | ||
| isComplete: isProfileComplete | ||
| }, | ||
| { | ||
| item: "Connections", | ||
| isComplete: isConnectionsComplete | ||
| }, | ||
| { | ||
| item: "Authentication", | ||
| isComplete: isAuthComplete | ||
| }, | ||
| { | ||
| item: "Payment methods", | ||
| isComplete: isPaymentComplete | ||
| } | ||
| ] | ||
|
|
||
| // TODO export these lil shits into their own component like lucide icons | ||
| const socialIcons: IconName[] = [ | ||
| "facebook", | ||
| "x-twitter", | ||
| "instagram", | ||
| "youtube", | ||
| "twitch", | ||
| "tiktok", | ||
| "github", | ||
| "telegram", | ||
| "discord", | ||
| "tumblr", | ||
| "threads", | ||
| "bilibili", | ||
| "deviantart", | ||
| "artstation", | ||
| "soundcloud", | ||
| "spotify", | ||
| "itunes-note", | ||
| "patreon", | ||
| "bandcamp", | ||
| "xbox", | ||
| "steam", | ||
| "battle-net", | ||
| "dribbble" | ||
| ] | ||
|
|
||
| return ( | ||
| <> | ||
| <section | ||
| className="max-w-screen-xl mt-20 mb-12 mx-auto px-9 text-center" | ||
| data-new-user-onboarding="" | ||
| > | ||
| <h1 className="!leading-[4.25rem] text-4xl xl:text-5xl bg-gradient-to-tl from-blue-700 via-purple-700 to-pink-500 text-transparent bg-clip-text"> | ||
| Welcome to MyFursona | ||
| </h1> | ||
| <p className="xl:text-xl xl:!leading-8 text-lg"> | ||
| {`Hello, ${username}—we're so glad to have you on board! You're almost there, | ||
| all we need is to get some of the nitty-gritty stuff done first. | ||
| Don't worry, you can change these anytime!`} | ||
| </p> | ||
| </section> | ||
| <FormWithProgress progress={progress}> | ||
| <div className="w-full flex flex-col gap-y-5"> | ||
| {/* Profile field */} | ||
| <Fieldset heading="Profile information"> | ||
| <input | ||
| type="display" | ||
| className="w-full px-4 py-2 my-1 border rounded-md border-color-3" | ||
| placeholder="" | ||
| value={displayName} | ||
| onChange={(e) => setDisplayName(e.target.value)} | ||
| /> | ||
| <input | ||
| type="user" | ||
| className="w-full px-4 py-2 my-1 border rounded-md border-color-3" | ||
| placeholder="@ozzythdev" | ||
| value={username} | ||
| onChange={(e) => setDisplayName(e.target.value)} | ||
| /> | ||
| </Fieldset> | ||
| {/* Connections field */} | ||
| <Fieldset | ||
| heading="Connections" | ||
| description={ | ||
| <div className="flex flex-col gap-y-2"> | ||
| <span> | ||
| Optional, you can skip this and add them from Account Settings | ||
| at anytime. Add connections such as social media and donations | ||
| associated to your account that will be displayed on your | ||
| profile. | ||
| </span> | ||
| <span> | ||
| Note that there are some connections that might display | ||
| additional metadata, you can change their visibility later. | ||
| </span> | ||
| </div> | ||
| } | ||
| > | ||
| <div className="bg-100 p-3.5 border border-300 rounded-lg"> | ||
| <div className="flex flex-wrap gap-2"> | ||
| {socialIcons.map((icon, i) => ( | ||
| <Button | ||
| key={i} | ||
| iconOnly | ||
| prefixIcon={ | ||
| <FontAwesomeIcon | ||
| icon={["fab", icon]} | ||
| fixedWidth | ||
| size="2x" | ||
| /> | ||
| } | ||
| ></Button> | ||
| ))} | ||
| </div> | ||
| <Separator dir="horizontal" padding="0.75rem" /> | ||
| <div className="inline-flex items-center gap-x-2"> | ||
| <InfoIcon size={18} /> | ||
| <span> | ||
| {"Any platforms missing or have a suggestions to add? "} | ||
| <Link href="/profile/create#" className="text-info underline"> | ||
| Let us know! | ||
| </Link> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </Fieldset> | ||
| {/* Payment field */} | ||
| <Fieldset | ||
| heading="Payment methods" | ||
| description="Optional, you can skip this and add them from Account Settings at anytime. Add your preferred payment method(s) when commissioning an artist or purchasing a physical goodies on MyFursona." | ||
| > | ||
| <div className="bg-100 p-3.5 border border-300 rounded-lg"> | ||
| <div className="flex gap-x-2 flex-wrap"> | ||
| <Button prefixIcon={<CreditCardIcon size={21} />}> | ||
| Credit/Debit card | ||
| </Button> | ||
| <Button | ||
| prefixIcon={ | ||
| <FontAwesomeIcon | ||
| icon={["fab", "paypal"]} | ||
| fixedWidth | ||
| size="lg" | ||
| /> | ||
| } | ||
| > | ||
| PayPal | ||
| </Button> | ||
| <Button | ||
| prefixIcon={ | ||
| <FontAwesomeIcon | ||
| icon={["fab", "stripe-s"]} | ||
| fixedWidth | ||
| size="lg" | ||
| /> | ||
| } | ||
| > | ||
| Stripe | ||
| </Button> | ||
| <Button prefixIcon={<CreditCardIcon size={21} />}> | ||
| Square | ||
| </Button> | ||
| <Button prefixIcon={<CreditCardIcon size={21} />}> | ||
| Klarna | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </Fieldset> | ||
| {/* Auth field */} | ||
| <Fieldset | ||
| heading="Authentication" | ||
| description={ | ||
| <> | ||
| Optional but <em>highly recommended</em>. You can skip this and | ||
| add them from Account Settings at anytime. Protect your account | ||
| with an additional layer of security with two-factor | ||
| authentication. | ||
| </> | ||
| } | ||
| > | ||
| <Button prefixIcon={<LockIcon size={21} />}>Setup 2FA</Button> | ||
| </Fieldset> | ||
| <div className="flex justify-end"> | ||
| <Button>Okay, I'm all set!</Button> | ||
| </div> | ||
| </div> | ||
| </FormWithProgress> | ||
| </> | ||
| ) | ||
| } |
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 |
|---|---|---|
| @@ -1,47 +1,10 @@ | ||
| "use client" | ||
| import { Metadata } from "next" | ||
| import CreateProfileForm from "./CreateProfileForm" | ||
|
|
||
| import { useState } from "react" | ||
| export const metadata: Metadata = { | ||
| title: "Create profile" | ||
| } | ||
|
|
||
| export default function Page() { | ||
| const [displayName, setDisplayName] = useState("") | ||
| // TODO: Check if the user has created an account, if so... redirect them to their profile | ||
| const username = "FluffyJane" | ||
|
|
||
| return ( | ||
| <div className="flex flex-row py-16 justify-center items-center"> | ||
| <div className="w-1/3"> | ||
| {/* TODO: Progress Line */} | ||
| <p>p</p> | ||
| </div> | ||
| <div className="w-1/2 text-center"> | ||
| <h1 className="text-4xl bg-gradient-to-tl from-blue-700 via-purple-700 to-pink-500 text-transparent bg-clip-text"> | ||
| Welcome to MyFursona | ||
| </h1> | ||
| <p> | ||
| Hello, {username}, we’re so glad to have you on board! Let’s get some | ||
| of the nitty-gritty stuff done first. Don’t worry, you can change | ||
| these anytime! | ||
| </p> | ||
| <section className="p-6"> | ||
| <h2>Profile Information</h2> | ||
| <div> | ||
| <input | ||
| type="display" | ||
| className="w-full px-4 py-2 my-1 border rounded-md border-color-3" | ||
| placeholder="" | ||
| value={displayName} | ||
| onChange={(e) => setDisplayName(e.target.value)} | ||
| /> | ||
| <input | ||
| type="user" | ||
| className="w-full px-4 py-2 my-1 border rounded-md border-color-3" | ||
| placeholder="@ozzythdev" | ||
| value={username} | ||
| onChange={(e) => setDisplayName(e.target.value)} | ||
| /> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </div> | ||
| ) | ||
| return <CreateProfileForm /> | ||
| } |
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,19 @@ | ||
| export default function Fieldset({ | ||
| children, | ||
| heading, | ||
| description | ||
| }: { | ||
| children?: React.ReactNode | ||
| heading?: string | ||
| description?: NonNullable<React.ReactElement> | string | ||
| }) { | ||
| return ( | ||
| <section data-bui-fieldset="" className="p-6 rounded-lg border border-300 bg-200"> | ||
| <div> | ||
| {heading ? <h2 className="mb-2 text-2xl">{heading}</h2> : null} | ||
| {description ? <span>{description}</span> : null} | ||
| </div> | ||
| <div className="pt-2">{children}</div> | ||
| </section> | ||
| ) | ||
| } |
Oops, something went wrong.