Skip to content

Commit 9f4b666

Browse files
tomihqtomihq
authored
Merge pull request #15 from tomihq/feature/reset-on-home
2 parents c19268e + 7155fbf commit 9f4b666

File tree

7 files changed

+1117
-795
lines changed

7 files changed

+1117
-795
lines changed

‎components/buttons/floating-animated-button.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
import { AnimatePresence, motion } from "framer-motion";
44

5+
import { BACKGROUND_BUTTON } from "@/lib/colors";
56
import { Button } from "@/components/ui/button";
67
import { ReactNode } from "react";
78
import { cn } from "@/lib/utils";
@@ -31,8 +32,12 @@ export function FloatingAnimatedButton({
3132
>
3233
<Button
3334
onClick={onClick}
35+
variant='ghost'
3436
size='icon'
35-
className='rounded-full shadow-lg w-28 flex items-center gap-1'
37+
className={cn(
38+
"w-28 relative hover:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 dark:border-slate-800",
39+
BACKGROUND_BUTTON
40+
)}
3641
>
3742
{children}
3843
</Button>

‎components/select-gender.tsx‎

Lines changed: 83 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,100 @@
11
"use client";
22

33
import * as React from "react";
4-
import { Check, ChevronsUpDown } from "lucide-react";
54

6-
import { cn } from "@/lib/utils";
7-
import { Button } from "@/components/ui/button";
5+
import { Check, ChevronsUpDown } from "lucide-react";
86
import {
9-
Command,
10-
CommandEmpty,
11-
CommandGroup,
12-
CommandInput,
13-
CommandItem,
14-
CommandList,
7+
Command,
8+
CommandEmpty,
9+
CommandGroup,
10+
CommandInput,
11+
CommandItem,
12+
CommandList,
1513
} from "@/components/ui/command";
1614
import {
17-
Popover,
18-
PopoverContent,
19-
PopoverTrigger,
15+
Popover,
16+
PopoverContent,
17+
PopoverTrigger,
2018
} from "@/components/ui/popover";
21-
import { GENDERS } from "@/config/variables";
19+
20+
import { Button } from "@/components/ui/button";
2221
import { Controller } from "react-hook-form";
22+
import { GENDERS } from "@/config/variables";
23+
import { cn } from "@/lib/utils";
2324
import { useTranslations } from "next-intl";
2425

2526
const SelectGender = ({ gender, control }) => {
26-
const t = useTranslations("selectGender")
27-
const [open, setOpen] = React.useState(false);
27+
const t = useTranslations("selectGender");
28+
const [open, setOpen] = React.useState(false);
2829

29-
const getGenderLabel = (value: string) => {
30-
switch(value) {
31-
case "male": return t("male")
32-
case "female": return t("female")
33-
case "non-binary": return t("nonBinary")
34-
case "prefer-not-say": return t("preferNotToSay")
35-
default: return value
36-
}
37-
}
30+
const getGenderLabel = (value: string) => {
31+
switch (value) {
32+
case "male":
33+
return t("male");
34+
case "female":
35+
return t("female");
36+
case "non-binary":
37+
return t("nonBinary");
38+
case "prefer-not-say":
39+
return t("preferNotToSay");
40+
default:
41+
return value;
42+
}
43+
};
3844

39-
return (
40-
<Popover open={open} onOpenChange={setOpen}>
41-
<PopoverTrigger asChild>
42-
<Button
43-
variant="outline"
44-
role="combobox"
45-
aria-expanded={open}
46-
className="w-full justify-between bg-slate-800 dark:border-slate-700"
47-
>
48-
{gender
49-
? getGenderLabel(gender)
50-
: t("select")}
51-
<ChevronsUpDown className="opacity-50" />
52-
</Button>
53-
</PopoverTrigger>
54-
<PopoverContent className=" p-0 w-[--radix-popover-trigger-width]" align="start" >
55-
<Command >
56-
<CommandList>
57-
<CommandGroup className="dark:bg-slate-800 dark:border-slate-700 ">
58-
{GENDERS.map((framework) => (
59-
<Controller
60-
name="gender"
61-
control={control}
62-
render={({ field }) => (
63-
<CommandItem
64-
key={framework.value}
65-
value={framework.value}
66-
onSelect={(currentValue) => {
67-
field.onChange(currentValue);
68-
setOpen(false);
69-
}}
70-
className=" dark:hover:bg-slate-700 dark:focus:bg-slate-700"
71-
>
72-
{getGenderLabel(framework.value)}
73-
<Check
74-
className={cn(
75-
"ml-auto",
76-
gender === framework.value
77-
? "opacity-100 text-green-600"
78-
: "opacity-0"
79-
)}
80-
/>
81-
</CommandItem>
82-
)}
83-
/>
84-
))}
85-
</CommandGroup>
86-
</CommandList>
87-
</Command>
88-
</PopoverContent>
89-
</Popover>
90-
);
45+
return (
46+
<Popover open={open} onOpenChange={setOpen}>
47+
<PopoverTrigger asChild>
48+
<Button
49+
variant='outline'
50+
role='combobox'
51+
aria-expanded={open}
52+
className={`w-full justify-between bg-white dark:bg-slate-800 dark:border-slate-700 ${gender ? "text-gray-700 dark:text-white" : "text-gray-500"} `}
53+
>
54+
{gender ? getGenderLabel(gender) : t("select")}
55+
<ChevronsUpDown className='opacity-50' />
56+
</Button>
57+
</PopoverTrigger>
58+
<PopoverContent
59+
className=' p-0 w-[--radix-popover-trigger-width]'
60+
align='start'
61+
>
62+
<Command>
63+
<CommandList>
64+
<CommandGroup className='dark:bg-slate-800 dark:border-slate-700 '>
65+
{GENDERS.map((framework) => (
66+
<Controller
67+
name='gender'
68+
control={control}
69+
render={({ field }) => (
70+
<CommandItem
71+
key={framework.value}
72+
value={framework.value}
73+
onSelect={(currentValue) => {
74+
field.onChange(currentValue);
75+
setOpen(false);
76+
}}
77+
className=' dark:hover:bg-slate-700 dark:focus:bg-slate-700'
78+
>
79+
{getGenderLabel(framework.value)}
80+
<Check
81+
className={cn(
82+
"ml-auto",
83+
gender === framework.value
84+
? "opacity-100 text-green-600"
85+
: "opacity-0"
86+
)}
87+
/>
88+
</CommandItem>
89+
)}
90+
/>
91+
))}
92+
</CommandGroup>
93+
</CommandList>
94+
</Command>
95+
</PopoverContent>
96+
</Popover>
97+
);
9198
};
9299

93100
export default SelectGender;

0 commit comments

Comments
 (0)