From 90cac3823e12888de1ab64e946dd06960bec0a05 Mon Sep 17 00:00:00 2001
From: bitbeckers <code@bitbeckers.com>
Date: Thu, 1 Aug 2024 20:00:58 +0200
Subject: [PATCH] fix(table): project overview page table positioning

---
 .../client/src/components/Filter/index.tsx    |   2 +-
 packages/client/src/views/Projects/index.tsx  | 181 +++++++++---------
 2 files changed, 90 insertions(+), 93 deletions(-)

diff --git a/packages/client/src/components/Filter/index.tsx b/packages/client/src/components/Filter/index.tsx
index 326a316..2d2c696 100644
--- a/packages/client/src/components/Filter/index.tsx
+++ b/packages/client/src/components/Filter/index.tsx
@@ -37,7 +37,7 @@ export const Filters: React.FC<FiltersProps> = ({
   onRefresh,
 }) => {
   return (
-    <div className="w-full flex gap-2 flex-wrap text-lg text-zinc-800 font-light leading-6">
+    <div className="w-full flex gap-2 flex-wrap justify-between text-lg text-zinc-800 font-light leading-6 py-2">
       {filters.map(({ count, active, title, onFilterChange, disabled }) => (
         <button
           key={title}
diff --git a/packages/client/src/views/Projects/index.tsx b/packages/client/src/views/Projects/index.tsx
index e16fc0f..a765b91 100644
--- a/packages/client/src/views/Projects/index.tsx
+++ b/packages/client/src/views/Projects/index.tsx
@@ -22,105 +22,102 @@ const ProjectsView: React.FC = () => {
         fetchProjects();
     }, []);
 
-
-    const content = <section className="flex-1">
-        <List
-            columns={[
-                {title: "project", size: 4},
-                {title: "category", size: 2},
-                {title: "transaction counts", size: 3},
-                {title: "attestation counts", size: 3},
-                {title: "last updated", size: 2},
-            ]}
-            items={projects}
-            onItemClick={(id) => {
-                console.log("Project", id);
-                push(`/projects/${id}`);
-            }}
-        />
-    </section>
-
     return (
-        <main className="flex flex-col gap-4 min-h-screen p-12">
-            <header className="w-full mx-auto max-w-screen-xl">
-                <h1 className="text-4xl font-semibold">Projects</h1>
-                <p className="mb-6">
-                    Discover and explore the magic being built by fellow project builders
-                    while tracking the impact metrics.
-                </p>
-                <Filters
-                    filters={[
-                        {
-                            title: "Onchain Builders",
-                            count: 25,
-                            active: true,
-                            onFilterChange: () => {
+        <main className="flex flex-row gap-4 min-h-screen p-12">
+            <div className="flex flex-col gap-4 w-full mx-auto">
+                <section className="w-full mx-auto max-w-screen-xl gap-4">
+                    <h1 className="text-4xl font-semibold">Projects</h1>
+                    <p className="mb-6">
+                        Discover and explore the magic being built by fellow project builders
+                        while tracking the impact metrics.
+                    </p>
+                    <Filters
+                        filters={[
+                            {
+                                title: "Onchain Builders",
+                                count: 25,
+                                active: true,
+                                onFilterChange: () => {
+                                },
+                            },
+                            {
+                                title: "OP Stack",
+                                count: 0,
+                                active: true,
+                                onFilterChange: () => {
+                                },
+                            },
+                            {
+                                title: "Governance",
+                                count: 0,
+                                active: false,
+                                onFilterChange: () => {
+                                },
+                            },
+                            {
+                                title: "Dev Tooling",
+                                count: 25,
+                                active: false,
+                                onFilterChange: () => {
+                                },
+                            },
+                        ]}
+                        sorts={[
+                            {
+                                label: "Name: A-Z",
+                                value: "name",
                             },
-                        },
-                        {
-                            title: "OP Stack",
-                            count: 0,
-                            active: true,
-                            onFilterChange: () => {
+                            {
+                                label: "Most Attested",
+                                value: "attested",
                             },
-                        },
-                        {
-                            title: "Governance",
-                            count: 0,
-                            active: false,
-                            onFilterChange: () => {
+                            {
+                                label: "Most Transacted",
+                                value: "transacted",
                             },
-                        },
-                        {
-                            title: "Dev Tooling",
-                            count: 25,
-                            active: false,
-                            onFilterChange: () => {
+                            {
+                                label: "Latest - Oldest",
+                                value: "latest",
                             },
-                        },
-                    ]}
-                    sorts={[
-                        {
-                            label: "Name: A-Z",
-                            value: "name",
-                        },
-                        {
-                            label: "Most Attested",
-                            value: "attested",
-                        },
-                        {
-                            label: "Most Transacted",
-                            value: "transacted",
-                        },
-                        {
-                            label: "Latest - Oldest",
-                            value: "latest",
-                        },
-                    ]}
-                    activeSort="name"
-                    refreshing={false}
-                    onRefresh={() => {
-                    }}
-                    onSortChange={() => {
-                    }}
-                />
-            </header>
-            <div className="flex gap-4 w-full mx-auto max-w-screen-xl ">
-                {content}
-                <aside className="basis-72">
-                    <div
-                        className="rounded-xl p-6 w-full h-[460px] bg-no-repeat bg-cover bg-clip-padding bg-right-top bg-[url('/images/img-project-side.jpg')]">
-                        <h3 className="text-2xl font-semibold mb-6">
-                            Observe the impact of projects on the ecosystem
-                        </h3>
-                        <p className="text-base font-light">
-                            Guided by proposed metrics from Impact evaluators. Project
-                            builders, evaluators, and community members are actively shaping
-                            these metrics by attesting to the outcomes on-chain
-                        </p>
+                        ]}
+                        activeSort="name"
+                        refreshing={false}
+                        onRefresh={() => {
+                        }}
+                        onSortChange={() => {
+                        }}
+                    />
+                    <div>
+                        <List
+                            columns={[
+                                {title: "project", size: 4},
+                                {title: "category", size: 2},
+                                {title: "transaction counts", size: 3},
+                                {title: "attestation counts", size: 3},
+                                {title: "last updated", size: 2},
+                            ]}
+                            items={projects}
+                            onItemClick={(id) => {
+                                console.log("Project", id);
+                                push(`/projects/${id}`);
+                            }}
+                        />
                     </div>
-                </aside>
+                </section>
             </div>
+            <aside className="basis-60">
+                <div
+                    className="rounded-xl p-6 w-full h-[460px] bg-no-repeat bg-cover bg-clip-padding bg-right-top bg-[url('/images/img-project-side.jpg')]">
+                    <h3 className="text-2xl font-semibold mb-6">
+                        Observe the impact of projects on the ecosystem
+                    </h3>
+                    <p className="text-base font-light">
+                        Guided by proposed metrics from Impact evaluators. Project
+                        builders, evaluators, and community members are actively shaping
+                        these metrics by attesting to the outcomes on-chain
+                    </p>
+                </div>
+            </aside>
         </main>
     );
 };