Skip to content

Commit

Permalink
chore: split form for rare items
Browse files Browse the repository at this point in the history
  • Loading branch information
Joshua-Ogbonna committed Nov 22, 2024
1 parent c20cca8 commit 175beb7
Show file tree
Hide file tree
Showing 2 changed files with 654 additions and 54 deletions.
116 changes: 62 additions & 54 deletions src/app/congratulations/page.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,68 @@
'use client'
import { useSearchParams } from 'next/navigation'
import { Button, Navbar } from '@/components'
import Link from 'next/link'
import { Suspense, useState } from 'react'
"use client";
import { useSearchParams } from "next/navigation";
import { Button, Navbar } from "@/components";
import Link from "next/link";
import { Suspense, useState } from "react";

export default function Congratulations() {
const brand_name = localStorage.getItem("brand_name");

const brand_name = localStorage.getItem('brand_name')
const [selectedOption, setSelectedOption] = useState<string>("");

const [selectedOption, setSelectedOption] = useState<string>('');
const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
setSelectedOption(event.target.value);
};

const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
setSelectedOption(event.target.value);
};

return (
<Suspense>
<Navbar />
<main className='h-screen py-12 px-16 flex flex-col gap-8 text-black'>
<h1 className='text-3xl font-bold'>Congratulations</h1>
<p className='text-xl'>Your brand {brand_name} has been launched successfully. <br />You are now ready to launch NFTs.</p>
<h1 className='text-4xl font-medium'>What would you like to create?</h1>
<div>
<select
style={{
backgroundImage: "url('/choose-down-arrow.png')",
backgroundRepeat: "no-repeat",
backgroundPosition: "right 1rem center",
backgroundSize: "16px 16px",
appearance: "none",
paddingRight: "2rem"
}}
className="bg-white rounded w-3/12 h-10 mt-8 border border-black px-4 font-semibold"
onChange={handleSelectChange}
value={selectedOption}
>
<option value="">+ Choose</option>
<option value="rare">Rare item (ERC-721)</option>
<option value="limited">Limited Edition (ERC-721A)</option>
</select>
{selectedOption === 'limited' ? (
<Link href="/create-phygital">
<Button className="w-fit bg-[#30D8FF] hover:text-white rounded-full text-black text-2xl ml-20">
Continue
</Button>
</Link>
) : (
<Button
className="w-fit bg-[#30D8FF] hover:text-white rounded-full text-black text-2xl ml-20"
disabled={selectedOption !== 'limited'}
>
Continue
</Button>
)}
</div>
</main>
</Suspense>
)
return (
<Suspense>
<Navbar />
<main className="h-screen py-12 px-16 flex flex-col gap-8 text-black">
<h1 className="text-3xl font-bold">Congratulations</h1>
<p className="text-xl">
Your brand {brand_name} has been launched successfully. <br />
You are now ready to launch NFTs.
</p>
<h1 className="text-4xl font-medium">What would you like to create?</h1>
<div>
<select
style={{
backgroundImage: "url('/choose-down-arrow.png')",
backgroundRepeat: "no-repeat",
backgroundPosition: "right 1rem center",
backgroundSize: "16px 16px",
appearance: "none",
paddingRight: "2rem",
}}
className="bg-white rounded w-3/12 h-10 mt-8 border border-black px-4 font-semibold"
onChange={handleSelectChange}
value={selectedOption}
>
<option value="">+ Choose</option>
<option value="rare">Rare item (ERC-721)</option>
<option value="limited">Limited Edition (ERC-721A)</option>
</select>
{selectedOption === "limited" ? (
<Link href="/create-phygital">
<Button className="w-fit bg-[#30D8FF] hover:text-white rounded-full text-black text-2xl ml-20">
Continue
</Button>
</Link>
) : selectedOption === "rare" ? (
<Link href="/create-phygital">
<Button className="w-fit bg-[#30D8FF] hover:text-white rounded-full text-black text-2xl ml-20">
Continue
</Button>
</Link>
) : (
<Button
className="w-fit bg-[#30D8FF] hover:text-white rounded-full text-black text-2xl ml-20"
disabled={selectedOption !== "limited"}
>
Continue
</Button>
)}
</div>
</main>
</Suspense>
);
}
Loading

0 comments on commit 175beb7

Please sign in to comment.