Skip to content

Commit 76650cf

Browse files
ianthirdwebianthirdweb
committed
Add gradient panel, add radio button styles and checkbox styles
1 parent 8c76cd3 commit 76650cf

File tree

1 file changed

+179
-109
lines changed
  • apps/dashboard/src/app/onboarding

1 file changed

+179
-109
lines changed

‎apps/dashboard/src/app/onboarding/page.tsx‎

Lines changed: 179 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22
import { Button } from "@/components/ui/button";
3+
import { Card } from "@/components/ui/card";
34
import { Input } from "@/components/ui/input";
45
import {
56
Select,
@@ -9,8 +10,10 @@ import {
910
SelectTrigger,
1011
SelectValue,
1112
} from "@/components/ui/select";
12-
import { Checkbox } from "@chakra-ui/react";
13+
import { Checkbox, Radio, RadioGroup } from "@chakra-ui/react";
1314
import { FormControl } from "@chakra-ui/react";
15+
import { Users2 } from "lucide-react";
16+
import { Building } from "lucide-react";
1417
import { useState } from "react";
1518
import {
1619
type FieldErrors,
@@ -34,6 +37,37 @@ interface StepProps {
3437
errors: FieldErrors<FormData>;
3538
}
3639

40+
interface RadioCardType {
41+
register: UseFormRegister<FormData>;
42+
value: string;
43+
label: string;
44+
description: string;
45+
icon: React.ReactNode;
46+
className: string;
47+
}
48+
49+
function RadioCard({
50+
register,
51+
value,
52+
label,
53+
description,
54+
icon,
55+
className,
56+
}: RadioCardType) {
57+
return (
58+
<Radio
59+
className={className}
60+
key={value}
61+
value={value}
62+
{...register("userType")}
63+
>
64+
{icon}
65+
<h5 className="font-semibold text-lg tracking-tight">{label}</h5>
66+
<p className="font-regular text-sm tracking-tight">{description}</p>
67+
</Radio>
68+
);
69+
}
70+
3771
export default function OnboardingPage() {
3872
const [step, setStep] = useState(1);
3973

@@ -42,15 +76,12 @@ export default function OnboardingPage() {
4276
handleSubmit,
4377
formState: { errors },
4478
trigger,
45-
watch,
4679
} = useForm<FormData>({
4780
defaultValues: {
4881
interests: [],
4982
},
5083
});
5184

52-
const watchInterests = watch("interests");
53-
5485
const onSubmit: SubmitHandler<FormData> = (data) => {
5586
console.log(data);
5687
};
@@ -87,29 +118,24 @@ export default function OnboardingPage() {
87118
<div className="flex flex-col space-y-8">
88119
{/* User Type */}
89120
<FormControl>
90-
<Select>
91-
<SelectTrigger className="w-[180px]">
92-
<SelectValue placeholder={"Select User Type"} />
93-
</SelectTrigger>
94-
<SelectContent>
95-
<SelectGroup>
96-
<SelectItem
97-
key={"developer"}
98-
value={"developer"}
99-
{...register("userType")}
100-
>
101-
Developer
102-
</SelectItem>
103-
<SelectItem
104-
key={"studio"}
105-
value={"studio"}
106-
{...register("userType")}
107-
>
108-
Studio
109-
</SelectItem>
110-
</SelectGroup>
111-
</SelectContent>
112-
</Select>
121+
<RadioGroup>
122+
<RadioCard
123+
className="flex h-40 w-40 flex-col items-center justify-center space-y-2 text-center data-[state=checked]:border-blue"
124+
value="developer"
125+
label="Developer"
126+
description="I am building an application or game"
127+
register={register}
128+
icon={<Users2 className="size-8" />}
129+
/>
130+
<RadioCard
131+
className="flex h-40 w-40 flex-col items-center justify-center space-y-2 text-center data-[state=checked]:border-blue"
132+
value="studio"
133+
label="Studio"
134+
description="I am building multiple applications or games"
135+
register={register}
136+
icon={<Building className="size-8" />}
137+
/>
138+
</RadioGroup>
113139

114140
<FormErrorMessage>
115141
{errors.userType && <span>{errors.userType.message}</span>}
@@ -185,80 +211,119 @@ export default function OnboardingPage() {
185211
const Step3: React.FC<StepProps> = ({ register }) => (
186212
<div className="flex flex-col space-y-4">
187213
<FormControl>
188-
<div className="flex flex-col gap-2">
189-
<Checkbox
190-
key="SOCIAL_LOGIN"
191-
value="SOCIAL_LOGIN"
192-
{...register("interests")}
193-
>
194-
<span className="text-sm">Social Login</span>
195-
</Checkbox>
196-
<Checkbox
197-
key="WALLET_CONECTORS"
198-
value="WALLET_CONECTORS"
199-
{...register("interests")}
200-
>
201-
<span className="text-sm">Wallet Connectors</span>
202-
</Checkbox>
203-
<Checkbox
204-
key="SPONSOR_TRANSACTIONS"
205-
value="SPONSOR_TRANSACTIONS"
206-
{...register("interests")}
207-
>
208-
<span className="text-sm">Sponsor Transactions</span>
209-
</Checkbox>
210-
<Checkbox
211-
key="UNIFIED_IDENTITY"
212-
value="UNIFIED_IDENTITY"
213-
{...register("interests")}
214-
>
215-
<span className="text-sm">Unified Identity</span>
216-
</Checkbox>
217-
<Checkbox
218-
key="CUSTOM_AUTH"
219-
value="CUSTOM_AUTH"
220-
{...register("interests")}
221-
>
222-
<span className="text-sm">Custom Auth</span>
223-
</Checkbox>
224-
<Checkbox
225-
key="QUERY_BLOCKCHAIN_DATA"
226-
value="QUERY_BLOCKCHAIN_DATA"
227-
{...register("interests")}
228-
>
229-
<span className="text-sm">Query Blockchain Data</span>
230-
</Checkbox>
231-
<Checkbox
232-
key="AUTO_TXN_MGMT"
233-
value="AUTO_TXN_MGMT"
234-
{...register("interests")}
235-
>
236-
<span className="text-sm">Automated Transaction Management</span>
237-
</Checkbox>
238-
<Checkbox
239-
key="GAMING_TOOLS"
240-
value="GAMING_TOOLS"
241-
{...register("interests")}
242-
>
243-
<span className="text-sm">Gaming Tools</span>
244-
</Checkbox>
245-
<Checkbox
246-
key="TOKEN_SWAPS"
247-
value="TOKEN_SWAPS"
248-
{...register("interests")}
249-
>
250-
<span className="text-sm">Token Swaps</span>
251-
</Checkbox>
252-
<Checkbox
253-
key="FIAT_ONRAMPS"
254-
value="FIAT_ONRAMPS"
255-
{...register("interests")}
256-
>
257-
<span className="text-sm">Fiat Onramps</span>
258-
</Checkbox>
214+
<div className="grid w-full grid-cols-3 items-center justify-center gap-1">
215+
<Card className="flex h-40 w-40 flex-col items-center justify-center space-y-2 text-center">
216+
<Checkbox
217+
key="SOCIAL_LOGIN"
218+
value="SOCIAL_LOGIN"
219+
{...register("interests")}
220+
>
221+
<h5 className="font-semibold text-lg tracking-tight">
222+
Social Login
223+
</h5>
224+
</Checkbox>
225+
</Card>
226+
<Card className="flex h-40 w-40 flex-col items-center justify-center space-y-2 text-center">
227+
<Checkbox
228+
key="WALLET_CONECTORS"
229+
value="WALLET_CONECTORS"
230+
{...register("interests")}
231+
>
232+
<h5 className="font-semibold text-lg tracking-tight">
233+
Wallet Connectors
234+
</h5>
235+
</Checkbox>
236+
</Card>
237+
<Card className="flex h-40 w-40 flex-col items-center justify-center space-y-2 text-center">
238+
<Checkbox
239+
key="SPONSOR_TRANSACTIONS"
240+
value="SPONSOR_TRANSACTIONS"
241+
{...register("interests")}
242+
>
243+
<h5 className="font-semibold text-lg tracking-tight">
244+
Sponsor Transactions
245+
</h5>
246+
</Checkbox>
247+
</Card>
248+
<Card className="flex h-40 w-40 flex-col items-center justify-center space-y-2 text-center">
249+
<Checkbox
250+
key="UNIFIED_IDENTITY"
251+
value="UNIFIED_IDENTITY"
252+
{...register("interests")}
253+
>
254+
<h5 className="font-semibold text-lg tracking-tight">
255+
Unified Identity
256+
</h5>
257+
</Checkbox>
258+
</Card>
259+
<Card className="flex h-40 w-40 flex-col items-center justify-center space-y-2 text-center">
260+
<Checkbox
261+
key="CUSTOM_AUTH"
262+
value="CUSTOM_AUTH"
263+
{...register("interests")}
264+
>
265+
<h5 className="font-semibold text-lg tracking-tight">
266+
Custom Auth
267+
</h5>
268+
</Checkbox>
269+
</Card>
270+
<Card className="flex h-40 w-40 flex-col items-center justify-center space-y-2 text-center">
271+
<Checkbox
272+
key="QUERY_BLOCKCHAIN_DATA"
273+
value="QUERY_BLOCKCHAIN_DATA"
274+
{...register("interests")}
275+
>
276+
<h5 className="font-semibold text-lg tracking-tight">
277+
Query Blockchain Data
278+
</h5>
279+
</Checkbox>
280+
</Card>
281+
<Card className="flex h-40 w-40 flex-col items-center justify-center space-y-2 text-center">
282+
<Checkbox
283+
key="AUTO_TXN_MGMT"
284+
value="AUTO_TXN_MGMT"
285+
{...register("interests")}
286+
>
287+
<h5 className="font-semibold text-lg tracking-tight">
288+
Automated Transaction Management
289+
</h5>
290+
</Checkbox>
291+
</Card>
292+
<Card className="flex h-40 w-40 flex-col items-center justify-center space-y-2 text-center">
293+
<Checkbox
294+
key="GAMING_TOOLS"
295+
value="GAMING_TOOLS"
296+
{...register("interests")}
297+
>
298+
<h5 className="font-semibold text-lg tracking-tight">
299+
Gaming Tools
300+
</h5>
301+
</Checkbox>
302+
</Card>
303+
<Card className="flex h-40 w-40 flex-col items-center justify-center space-y-2 text-center">
304+
<Checkbox
305+
key="TOKEN_SWAPS"
306+
value="TOKEN_SWAPS"
307+
{...register("interests")}
308+
>
309+
<h5 className="font-semibold text-lg tracking-tight">
310+
Token Swaps
311+
</h5>
312+
</Checkbox>
313+
</Card>
314+
<Card className="flex h-40 w-40 flex-col items-center justify-center space-y-2 text-center">
315+
<Checkbox
316+
key="FIAT_ONRAMPS"
317+
value="FIAT_ONRAMPS"
318+
{...register("interests")}
319+
>
320+
<h5 className="font-semibold text-lg tracking-tight">
321+
Fiat Onramps
322+
</h5>
323+
</Checkbox>
324+
</Card>
259325
</div>
260326
</FormControl>
261-
<h1>Selected: {watchInterests.join(", ")}</h1>
262327
</div>
263328
);
264329

@@ -280,28 +345,28 @@ export default function OnboardingPage() {
280345
{step === 2 && <Step2 register={register} errors={errors} />}
281346
{step === 3 && <Step3 register={register} errors={errors} />}
282347
</form>
283-
<div className="absolute bottom-12 flex w-full items-center justify-between">
348+
<div className="absolute bottom-12 box-border flex w-full items-center justify-between">
284349
{/* Stepper */}
285350
<div className="flex space-x-4">
286351
<div
287352
className={
288353
step === 1
289-
? "h-3 w-12 rounded-md bg-white"
290-
: "h-3 w-12 rounded-md bg-secondary"
354+
? "h-3 w-12 rounded-md bg-white transition ease-in-out"
355+
: "h-3 w-12 rounded-md bg-secondary transition ease-in-out"
291356
}
292357
/>
293358
<div
294359
className={
295360
step === 2
296-
? "h-3 w-12 rounded-md bg-white"
297-
: "h-3 w-12 rounded-md bg-secondary"
361+
? "h-3 w-12 rounded-md bg-white transition ease-in-out"
362+
: "h-3 w-12 rounded-md bg-secondary transition ease-in-out"
298363
}
299364
/>
300365
<div
301366
className={
302367
step === 3
303-
? "h-3 w-12 rounded-md bg-white"
304-
: "h-3 w-12 rounded-md bg-secondary"
368+
? "h-3 w-12 rounded-md bg-white transition ease-in-out"
369+
: "h-3 w-12 rounded-md bg-secondary transition ease-in-out"
305370
}
306371
/>
307372
</div>
@@ -316,18 +381,23 @@ export default function OnboardingPage() {
316381
</Button>
317382
)}
318383
{step < 3 && (
319-
<Button type="button" onClick={nextStep}>
384+
<Button type="button" variant="primary" onClick={nextStep}>
320385
Next
321386
</Button>
322387
)}
323388
{step === 3 && (
324-
<Button type="submit" onClick={handleSubmit(onSubmit)}>
325-
Submit
389+
<Button
390+
type="submit"
391+
variant="primary"
392+
onClick={handleSubmit(onSubmit)}
393+
>
394+
Finish
326395
</Button>
327396
)}
328397
</div>
329398
</div>
330399
</div>
400+
<div className="h-screen w-1/2 bg-gradient-to-r from-purple-500 to-pink-500" />
331401
</main>
332402
</div>
333403
);

0 commit comments

Comments
 (0)