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

feat: refactor layout in Portfolio and ProjectSection components for improved responsiveness and update DataTable pagination state management

Browse Source
This commit is contained in:
Pattadon 2024-11-14 14:14:38 +07:00
parent 63efe5ffa2
commit 8a09cbae85
3 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/portfolio/[uid]/page.tsx
View File

@ -98,7 +98,6 @@ export default async function Portfolio({ params }: { params: { uid: string } })
? await Promise.all(deals.map(async (item) => await getBusinessTypeName(supabase, item.project_id))) ? await Promise.all(deals.map(async (item) => await getBusinessTypeName(supabase, item.project_id)))
: []; : [];
const countedBusinessType = countValues(businessType.filter((item) => item !== null)); const countedBusinessType = countValues(businessType.filter((item) => item !== null));
console.table(deals);
return ( return (
<div className="container max-w-screen-xl"> <div className="container max-w-screen-xl">
<div className="text-center py-4"> <div className="text-center py-4">
@ -189,8 +188,8 @@ export default async function Portfolio({ params }: { params: { uid: string } })
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>
<div className="flex flex-cols-3 w-full gap-5 mt-5"> <div className="grid grid-cols-1 md:grid-cols-3 w-full gap-5 mt-5">
<Card className="w-1/3 h-fit"> <Card className="w-full h-fit">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-md font-bold">Categories of Invested Projects</CardTitle> <CardTitle className="text-md font-bold">Categories of Invested Projects</CardTitle>
<TooltipProvider> <TooltipProvider>
@ -215,7 +214,7 @@ export default async function Portfolio({ params }: { params: { uid: string } })
/> />
</CardContent> </CardContent>
</Card> </Card>
<Card className="w-1/3 h-fit"> <Card className="w-full h-fit">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-md font-bold">Types of Businesses Invested In</CardTitle> <CardTitle className="text-md font-bold">Types of Businesses Invested In</CardTitle>
<TooltipProvider> <TooltipProvider>
@ -240,7 +239,7 @@ export default async function Portfolio({ params }: { params: { uid: string } })
/> />
</CardContent> </CardContent>
</Card> </Card>
<Card className="w-1/3"> <Card className="w-full">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-md font-bold">Recent investment</CardTitle> <CardTitle className="text-md font-bold">Recent investment</CardTitle>
</CardHeader> </CardHeader>

2
src/components/ProjectSection.tsx
View File

@ -20,7 +20,7 @@ export function ProjectSection({ projectsData }: { projectsData: ProjectCardProp
} }
return ( return (
<div className="grid grid-cols-4 gap-6"> <div className="grid grid-cols-1 sm:grid-cols-4 gap-6">
{projectsData.map((project) => ( {projectsData.map((project) => (
<div key={project.id}> <div key={project.id}>
<Link href={`/deals/${project.id}`}> <Link href={`/deals/${project.id}`}>

4
src/components/dataTable.tsx
View File

@ -177,8 +177,8 @@ export function DataTable({ data }: { data: ModalProps[] }) {
const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({}); const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({});
const [pagination, setPagination] = React.useState({ const [pagination, setPagination] = React.useState({
pageIndex: 0, //initial page index pageIndex: 0,
pageSize: 5, //default page size pageSize: 5,
}); });
const table = useReactTable({ const table = useReactTable({