Fixed Overlap Footer with most helpful div in Discussions page (#571)

ohcnetwork · Dec 23, 2024 · e1e21f1 · e1e21f1
1 parent b46dbc6
commit e1e21f1
Showing 1 changed file with 35 additions and 34 deletions.
diff --git a/app/discussions/page.tsx b/app/discussions/page.tsx
@@ -1,7 +1,7 @@
-import { fetchGithubDiscussion } from "../../lib/discussion";
-import GithubDiscussions from "../../components/discussions/GithubDiscussions";
 import { getContributors } from "@/lib/api";
 import Link from "next/link";
+import GithubDiscussions from "@/components/discussions/GithubDiscussions";
+import { fetchGithubDiscussion } from "@/lib/discussion";
 
 export default async function Page() {
   const discussions = await fetchGithubDiscussion();
@@ -15,39 +15,40 @@ export default async function Page() {
   return (
     <>
       <GithubDiscussions discussions={discussions} searchParams={{}} />
-      <div className="bg-secondary-100/50 dark:bg-secondary-800/50 h-fit w-full rounded-lg border border-secondary-100 shadow-lg dark:border-secondary-800 lg:fixed lg:right-28 lg:top-48 lg:w-[23%]">
-        <div className="flex flex-col justify-between rounded-t-lg border-b border-secondary-300 bg-secondary-100 px-6 py-4 dark:border-secondary-700 dark:bg-secondary-800 md:flex-row md:items-center">
-          <h4 className="font-bold">Most Helpful</h4>
-        </div>
-
-        <div className="flex flex-col gap-2 p-4 ">
-          {contributors
-            .filter((contributor) => contributor.points > 0)
-            .sort((a, b) => b.points - a.points)
-            .slice(0, 3)
-            .map((contributor, index) => (
-              <Link
-                key={index}
-                href={`/contributors/${contributor.githubHandle}`}
-              >
-                <span className="flex cursor-pointer items-center space-x-3 rounded-lg bg-background px-2 py-3 transition duration-300 hover:shadow-lg hover:shadow-primary-500">
-                  <span className="flex h-10 w-10 items-center justify-center rounded-full bg-secondary-100 text-lg dark:bg-secondary-800">
-                    {index + 1}
+      <div className="mb-4 h-fit w-full rounded-lg pt-7 lg:fixed lg:right-28 lg:top-20 lg:w-[23%]">
+        <div className="bg-secondary-100/50 dark:bg-secondary-800/50 w-full border border-secondary-100  shadow-lg dark:border-secondary-800">
+          <div className="flex flex-col justify-between rounded-t-lg border-b border-secondary-300 bg-secondary-100 px-6 py-4 dark:border-secondary-700 dark:bg-secondary-800 md:flex-row md:items-center">
+            <h4 className="font-bold">Most Helpful</h4>
+          </div>
+          <div className="flex flex-col gap-2 p-4 ">
+            {contributors
+              .filter((contributor) => contributor.points > 0)
+              .sort((a, b) => b.points - a.points)
+              .slice(0, 3)
+              .map((contributor, index) => (
+                <Link
+                  key={index}
+                  href={`/contributors/${contributor.githubHandle}`}
+                >
+                  <span className="flex cursor-pointer items-center space-x-3 rounded-lg bg-background px-2 py-3 transition duration-300 hover:shadow-lg hover:shadow-primary-500">
+                    <span className="flex h-10 w-10 items-center justify-center rounded-full bg-secondary-100 text-lg dark:bg-secondary-800">
+                      {index + 1}
+                    </span>
+                    <span className="text-lg font-medium">
+                      {contributor.name}
+                    </span>
                   </span>
-                  <span className="text-lg font-medium">
-                    {contributor.name}
-                  </span>
-                </span>
-              </Link>
-            ))}
-        </div>
-        <div className="pt-2">
-          <Link
-            className="block rounded border border-primary-500 bg-gradient-to-b from-primary-500 to-primary-700 p-3 px-10 text-center font-bold text-white shadow-lg transition hover:from-secondary-800 hover:to-secondary-900 hover:text-primary-500 hover:shadow-xl"
-            href="/leaderboard?sortBy=discussion_comment_created"
-          >
-            Show More
-          </Link>
+                </Link>
+              ))}
+          </div>
+          <div className="pt-2">
+            <Link
+              className="block rounded border border-primary-500 bg-gradient-to-b from-primary-500 to-primary-700 p-3 px-10 text-center font-bold text-white shadow-lg transition hover:from-secondary-800 hover:to-secondary-900 hover:text-primary-500 hover:shadow-xl"
+              href="/leaderboard/last-week?ordering=discussion_created"
+            >
+              Show More
+            </Link>
+          </div>
         </div>
       </div>
     </>