inmake/graff-mate-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: refactor NewSelect component to support grid layout and enhance item styling

Browse Source
This commit is contained in:
c00b3r
2025-06-16 16:20:57 +05:00
parent 1ae87e954b
commit 38671b77e4
2 changed files with 84 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/NewSelect.tsx
+47 -28
View File
@@ -40,15 +40,7 @@ function NewSelect<T extends { name: string }>({
console.log(selectedValues);
}, [selectedValues]);
return isGrid ? (
<div className="w-[19.583vw] rounded-[0.833vw]">
<div className="grid grid-cols-3 gap[0.139vw]">
{data.map((item) => (
<div key={item.name}>{item.name}</div>
))}
</div>
</div>
) : (
return (
<div
className="relative w-[19.583vw] bg-white rounded-[0.833vw] select-none"
ref={selectRef}
@@ -88,10 +80,10 @@ function NewSelect<T extends { name: string }>({
boxShadow: "0px 4px 40px 0px #0000000D, 0px 2px 2px 0px #0000000D",
}}
>
<div className="bg-white sticky top-0 pt-[0.833vw]">
<div className="bg-white sticky top-0 pt-[0.833vw] z-1">
<Button
variant="secondary"
className="!justify-start w-full text-s font-medium p-[0.833vw] text-[#7D7D7D] flex items-center gap-[0.278vw] cursor-pointer rounded-[0.278vw] hover:bg-[#F6F6F6]"
className="!justify-start w-full text-s font-medium p-[0.833vw] text-[#7D7D7D] flex items-center gap-[0.278vw] cursor-pointer rounded-[0.278vw] hover:bg-[#F6F6F6] bg-white"
onClick={() => setSelectedValues([])}
>
<span className="size-[1.111vw] flex items-center justify-center">
@@ -101,24 +93,51 @@ function NewSelect<T extends { name: string }>({
</Button>
</div>
<div className="min-h-[1px] w-full bg-[#F6F6F6]" />
{data.map((item, index) => (
<div
key={index}
className="flex gap-[0.278vw] w-full p-[0.833vw] text-s rounded-[0.278vw] hover:bg-[#F6F6F6] cursor-pointer"
onClick={() => handleSelectClick(item)}
>
<div className="size-[1.111vw]">
{selectedValues
.map((value) => value.name)
.includes(item.name) && (
<span className="text-[#7B60F3]">
<CheckIcon />
</span>
)}
</div>
{item.name}
{isGrid ? (
<div className="grid grid-cols-3 gap-[0.139vw]">
{data.map((item) => (
<div
key={item.name}
className=" p-[0.556vw] flex flex-col gap-[0.278vw] justify-center items-center cursor-pointer rounded-[0.278vw] hover:bg-[#F6F6F6]"
onClick={() => handleSelectClick(item)}
>
<div className="relative size-[2.222vw] rounded-full bg-[#d4d4d4]">
{selectedValues
.map((value) => value.name)
.includes(item.name) && (
<span className="absolute bottom-[1.389vw] left-[1.389vw] rounded-full size-[1.111vw] bg-[#7B60F3] text-white flex items-center justify-center">
<div className="size-[0.833vw]">
<CheckIcon />
</div>
</span>
)}
</div>
<p className="text-s font-medium">{item.name}</p>
</div>
))}
</div>
))}
) : (
<>
{data.map((item, index) => (
<div
key={index}
className="flex gap-[0.278vw] w-full p-[0.833vw] text-s rounded-[0.278vw] hover:bg-[#F6F6F6] cursor-pointer"
onClick={() => handleSelectClick(item)}
>
<div className="size-[1.111vw]">
{selectedValues
.map((value) => value.name)
.includes(item.name) && (
<span className="text-[#7B60F3]">
<CheckIcon />
</span>
)}
</div>
{item.name}
</div>
))}
</>
)}
</div>
</div>
</div>
src/pages/DashboardPage.tsx
+37 -17
View File
@@ -61,23 +61,43 @@ function DashboardPage() {
</div>
</div>
</div>
<NewSelect
data={[
{ name: "test" },
{ name: "test2" },
{ name: "test3" },
{ name: "test4" },
{ name: "test5" },
{ name: "test6" },
{ name: "test7" },
{ name: "test8" },
{ name: "test9" },
{ name: "test10" },
]}
isGrid={false}
placeholder="Выберите сервер"
resetTitle="Все сервера"
/>
<div className="flex">
<NewSelect
data={[
{ name: "test" },
{ name: "test2" },
{ name: "test3" },
{ name: "test4" },
{ name: "test5" },
{ name: "test6" },
{ name: "test7" },
{ name: "test8" },
{ name: "test9" },
{ name: "test10" },
]}
isGrid={false}
placeholder="Выберите сервер"
resetTitle="Все сервера"
/>
<NewSelect
data={[
{ name: "test" },
{ name: "test2" },
{ name: "test3" },
{ name: "test4" },
{ name: "test5" },
{ name: "test6" },
{ name: "test7" },
{ name: "test8" },
{ name: "test9" },
{ name: "test10" },
]}
isGrid
placeholder="Выберите сервер"
resetTitle="Все сервера"
/>
</div>
<div className="w-full">
<div className="flex flex-col gap-[1.667vw]">
<h1 className="title-l font-[500] ">Последние сеансы</h1>