forked from Octasol/octasol
-
Notifications
You must be signed in to change notification settings - Fork 0
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
3a96b27
commit 6e62270
Showing
6 changed files
with
216 additions
and
152 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import React, { useState } from "react"; | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardDescription, | ||
| CardFooter, | ||
| CardHeader, | ||
| CardTitle, | ||
| } from "@/components/ui/card"; | ||
| import { ArrowBigRight } from "lucide-react"; | ||
| import NextButton from "@/components/Button/NextButton"; | ||
| import Image from "next/image"; | ||
|
|
||
| type Props = { | ||
| onNext: () => void; | ||
| }; | ||
|
|
||
| const Tab1 = ({ onNext }: Props) => { | ||
| const [selectedCard, setSelectedCard] = useState<string>(""); | ||
|
|
||
| const handleSelect = (value: string) => { | ||
| setSelectedCard(value); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex flex-col "> | ||
| <Card className=""> | ||
| <CardHeader> | ||
| <CardTitle>Who Are You?</CardTitle> | ||
| <CardDescription> | ||
| Make changes to your account here. Click save when you're done. | ||
| </CardDescription> | ||
| </CardHeader> | ||
| <CardContent className="py-8"> | ||
| <div className="w-full grid grid-cols-1 grid-rows-2 md:grid-cols-2 md:grid-rows-1 gap-8 lg:gap-0"> | ||
| <Card | ||
| onClick={() => handleSelect("Individual")} | ||
| className={`lg:mx-10 p-5 py-8 flex flex-col gap-5 justify-center items-center | ||
| hover:shadow-lg hover:shadow-[#34597e] | ||
| ${ | ||
| selectedCard != "Organization" | ||
| ? "shadow-[#34597e] shadow-lg" | ||
| : "opacity-50 " | ||
| }`} | ||
| > | ||
| <CardTitle className="flex justify-center items-center text-xl"> | ||
| Individual | ||
| </CardTitle> | ||
| <CardDescription> | ||
| Ideal for freelancers or solo creators looking to complete tasks | ||
| independently. Select this if you're working on your own. | ||
| </CardDescription> | ||
| </Card> | ||
| <Card | ||
| onClick={() => handleSelect("Organization")} | ||
| className={`lg:mx-10 p-5 py-8 flex flex-col gap-5 justify-center items-center | ||
| hover:shadow-lg hover:shadow-[#34597e] | ||
| ${ | ||
| selectedCard !== "Individual" | ||
| ? "shadow-[#34597e] shadow-lg" | ||
| : "opacity-50 " | ||
| }`} | ||
| > | ||
| <CardTitle className="flex justify-center items-center text-xl"> | ||
| Organization | ||
| </CardTitle> | ||
| <CardDescription> | ||
| Perfect for businesses or teams managing bounties on behalf of a | ||
| group. Choose this if you're posting tasks as a company or | ||
| community. | ||
| </CardDescription> | ||
| </Card> | ||
| </div> | ||
| </CardContent> | ||
| <CardFooter className="w-full flex justify-end"> | ||
| <NextButton onClick={onNext}> | ||
| <div className="flex items-center gap-2"> | ||
| NEXT | ||
| <ArrowBigRight size={20} /> | ||
| </div> | ||
| </NextButton> | ||
| </CardFooter> | ||
| </Card> | ||
| <div className="flex flex-col justify-center items-center py-12 gap-6"> | ||
| <p className="text-center text-xl lg:text-2xl font-semibold leading-none tracking-wide"> | ||
| or choose exixting profile... | ||
| </p> | ||
| <div className="w-full h-full gap-6 flex justify-center items-center flex-wrap"> | ||
| <Image | ||
| src="/gfg.png" | ||
| alt="org" | ||
| width={45} | ||
| height={45} | ||
| className="rounded-lg" | ||
| /> | ||
| <Image | ||
| src="/gfg.png" | ||
| alt="org" | ||
| width={45} | ||
| height={45} | ||
| className="rounded-lg" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Tab1; |
30 changes: 30 additions & 0 deletions
30
src/app/(pages)/listunescrowed/component/TabNavigation.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,30 @@ | ||
| import React from "react"; | ||
| import { ArrowBigLeft, ArrowBigRight } from "lucide-react"; | ||
| import NextButton from "@/components/Button/NextButton"; | ||
|
|
||
| type Props = { | ||
| onNext: () => void; | ||
| onPrev: () => void; | ||
| }; | ||
|
|
||
| const TabNavigation = ({ onNext, onPrev }: Props) => { | ||
| return ( | ||
| <div className="w-full flex justify-between items-center"> | ||
| <NextButton onClick={onPrev}> | ||
| <div className="flex gap-2 items-center"> | ||
| <ArrowBigLeft size={20} /> | ||
| PREV | ||
| </div> | ||
| </NextButton> | ||
|
|
||
| <NextButton onClick={onNext}> | ||
| <div className="flex gap-2 items-center"> | ||
| NEXT | ||
| <ArrowBigRight size={20} /> | ||
| </div> | ||
| </NextButton> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default TabNavigation; |
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
Oops, something went wrong.