sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-19 05:54:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor UI components and add filter options in Deals page

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-09-11 21:05:23 +07:00
parent 7a0bf7bcf8
commit 998fe12487
1 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/app/deals/page.tsx
View File

@ -7,14 +7,18 @@ import {
SelectValue, SelectValue,
} from "@/components/ui/select"; } from "@/components/ui/select";
import { useState } from "react"; import { useState } from "react";
import { Clock3Icon } from "lucide-react"; import {
Clock3Icon,
MessageSquareIcon,
UserIcon,
UsersIcon,
} from "lucide-react";
export default function Deals() { export default function Deals() {
const [postAtFilter, setPostAtFilter] = useState(""); const [postAtFilter, setPostAtFilter] = useState("");
const [contentTypeFilter, setContentTypeFilter] = useState(""); const [contentTypeFilter, setContentTypeFilter] = useState("");
const handlePostAtFilter = (value: string) => { const [authorFilter, setAuthorFilter] = useState("");
setPostAtFilter(value); const [groupsFilter, setGroupFilter] = useState("");
};
return ( return (
<div> <div>
<div className=" w-full h-[350px] mt-10 ml-[15%]"> <div className=" w-full h-[350px] mt-10 ml-[15%]">
@ -24,27 +28,52 @@ export default function Deals() {
<p> <p>
All companies are <u>vetted & pass due diligence.</u> All companies are <u>vetted & pass due diligence.</u>
</p> </p>
<div className="flex mt-10 bg-red-500 gap-3"> {/* filters */}
<Select onValueChange={handlePostAtFilter}> <div className="flex mt-10 gap-3">
<Select onValueChange={(value) => setPostAtFilter(value)}>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-[180px]">
<Clock3Icon className="ml-2" /> <Clock3Icon className="ml-2" />
<SelectValue placeholder="Posted at" /> <SelectValue placeholder="Posted at" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="Today">Today</SelectItem> <SelectItem value="Today">Today</SelectItem>
<SelectItem value="Yesterday">Yesterday</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<Select onValueChange={(value) => setContentTypeFilter(value)}> <Select onValueChange={(value) => setContentTypeFilter(value)}>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-[180px]">
<Clock3Icon className="ml-2" /> <MessageSquareIcon className="ml-2" />
<SelectValue placeholder="Content type" /> <SelectValue placeholder="Content type" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="blog">blog</SelectItem> <SelectItem value="Blog">Blog</SelectItem>
<SelectItem value="Youtube">Youtube</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
{postAtFilter} <Select onValueChange={(value) => setAuthorFilter(value)}>
<SelectTrigger className="w-[180px]">
<UserIcon className="ml-2" />
<SelectValue placeholder="Author" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Me">Me</SelectItem>
<SelectItem value="Charlie Puth">Charlie Puth</SelectItem>
</SelectContent>
</Select>
<Select onValueChange={(value) => setGroupFilter(value)}>
<SelectTrigger className="w-[180px]">
<UsersIcon className="ml-2" />
<SelectValue placeholder="Sent to groups" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Group1">Group1</SelectItem>
<SelectItem value="Group2">Group2</SelectItem>
</SelectContent>
</Select>
{/* {postAtFilter}
{contentTypeFilter} {contentTypeFilter}
{authorFilter}
{groupsFilter} */}
</div> </div>
</div> </div>
</div> </div>