Spaces:
Running
Running
File size: 2,173 Bytes
b162b24 173eaab b162b24 3bc81b1 b162b24 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import classNames from "classnames";
import { useState } from "react";
import { FiChevronDown } from "react-icons/fi";
import { STYLES } from "@/utils";
export const Styles = ({
value,
onChange,
}: {
value: string;
onChange: (value: string) => void;
}) => {
const [viewAll, setViewAll] = useState(false);
return (
<div>
<p className="text-white font-semibold text-base mb-4">Select a style</p>
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2 relative z-[1]">
{STYLES.slice(viewAll ? 0 : 0, viewAll ? STYLES.length : 9).map(
(style) => (
<div
key={style.label}
className={classNames(
"w-full cursor-pointer transition-all duration-200 opacity-40 hover:opacity-100 rounded-xl bg-cover bg-center relative px-2 py-8 bg-amber-900 text-center font-bold text-white text-xl z-[1] overflow-hidden",
{
"!opacity-100 ring-[4px] ring-white/50":
style.value === value,
}
)}
style={{
backgroundImage: `url(${style.image})`,
}}
onClick={() => onChange(style.value)}
>
{style.label}
<div className="bg-black/50 -z-[1] w-full h-full absolute top-0 left-0"></div>
</div>
)
)}
<div
className={classNames(
"w-full h-[100px] bg-gradient-to-b from-transparent absolute -bottom-8 left-0 -z-[1] flex items-end justify-center",
{
"to-stone-950 !z-[1]": !viewAll,
}
)}
>
<p
className="text-white/50 hover:text-white/90 text-sm font-medium mt-2 cursor-pointer hover:underline"
onClick={() => setViewAll(!viewAll)}
>
View all
<FiChevronDown
className={classNames(
"inline-block ml-1 transition-all duration-200",
{
"transform rotate-180": viewAll,
}
)}
/>
</p>
</div>
</div>
</div>
);
};
|