add project-page UI (#12)

* add project-page UI * update icons source to react-icon * fix(mock): updated mock getMock * fix pr reviews * update (project-page): linked to dynamic route --------- Co-authored-by: Haxfx <[email protected]>
Seistart · Mar 21, 2024 · 15ad40c · 15ad40c
1 parent 5f63ff0
commit 15ad40c
Show file tree

Hide file tree

Showing 12 changed files with 481 additions and 9 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,2 @@
 DATABASE_URL=postgresql://localhost:5432/seistart
-NEXTAUTH_JWT_SECRET=KyxVXUR2EIF1MuesX9ygnnsfeQyu7ExK_2suK6lLqWA4evzzDjBTR1KF__frGgWGjFoUCk1p2PPpBIeG5tVydQ
+NEXTAUTH_JWT_SECRET=KyxVXUR2EIF1MuesX9ygnnsfeQyu7ExK_2suK6lLqWA4evzzDjBTR1KF__frGgWGjFoUCk1p2PPpBIeG5tVydQ
diff --git a/app/(app)/projects/[slug]/ProjectLinks.tsx b/app/(app)/projects/[slug]/ProjectLinks.tsx
@@ -0,0 +1,11 @@
+import Link from "next/link"
+import React from "react"
+
+interface ProjectLinksProps {
+  url: string
+  children: React.ReactNode
+}
+
+export default function ProjectLinks({ url, children }: ProjectLinksProps) {
+  return url ? <Link href={url}>{children}</Link> : <></>
+}
diff --git a/app/(app)/projects/[slug]/page.tsx b/app/(app)/projects/[slug]/page.tsx
@@ -1,4 +1,12 @@
+import { AspectRatio } from "@/components/ui/aspect-ratio"
 import { getProjectBySlugAction } from "@/server-actions/projects/projects.actions"
+import { TwitterIcon } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import { FaDiscord, FaTelegram } from "react-icons/fa"
+import { GoDotFill } from "react-icons/go"
+import { IoBookOutline } from "react-icons/io5"
+import ProjectLinks from "./ProjectLinks"
 
 export const dynamic = "force-dynamic"
 
@@ -15,11 +23,100 @@ export async function generateMetadata({
   }
 }
 
+const images = [
+  {
+    url: "/images/noimage.webp",
+  },
+
+  {
+    url: "/images/noimage.webp",
+  },
+
+  {
+    url: "/images/noimage.webp",
+  },
+]
+
 export default async function ProjectPage({
   params,
 }: {
   params: { slug: string }
 }) {
   const { project } = await getProjectBySlugAction(params.slug)
-  return <>{project.name}</>
+  return (
+    <main className="min-h-screen flex-col px-4 py-6 md:p-24">
+      <div className="flex flex-col gap-5 border-b pb-5 sm:pb-10">
+        <Link
+          href={"/projects"}
+          className="text-sm text-muted-foreground sm:text-base"
+        >{`< All Projects`}</Link>
+        <div className="flex flex-col gap-2 sm:flex-row sm:gap-7">
+          <Image
+            src={"/images/sei.jpg"}
+            alt={project.name}
+            width={150}
+            height={150}
+          />
+          <div className="flex flex-col justify-between gap-2">
+            <h1 className="text-xl font-semibold capitalize sm:text-3xl">
+              {project.tokenName}
+            </h1>
+            <h2 className="text-base font-extralight sm:w-2/3 sm:text-lg">
+              {project.description}
+            </h2>
+            <div className="flex gap-2">
+              {project.tags.map((tag, index) => (
+                <Link
+                  key={index}
+                  href={tag.toLowerCase()}
+                  className="borde bg-[#1c1f2a] p-2 text-sm font-medium"
+                >
+                  {tag}
+                </Link>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-4 sm:mt-5">
+          <div className="flex items-center gap-4">
+            <div
+              className={`flex items-center border px-2 py-1 text-sm ${project.isLive ? "text-green-500" : "text-red-500"}`}
+            >
+              <GoDotFill color={project.isLive ? "#00D26A" : "red"} size={20} />
+              <span>{project.isLive ? "Live" : "Offline"}</span>
+            </div>
+          </div>
+          <div className="flex gap-2">
+            <p className="mr-2 hidden sm:flex">Official Links:</p>
+            <div className="flex gap-4">
+              <ProjectLinks url={project.whitepaper}>
+                <IoBookOutline size={23} />
+              </ProjectLinks>
+              <ProjectLinks url={project.twitter}>
+                <TwitterIcon size={23} />
+              </ProjectLinks>
+              <ProjectLinks url={project.discord}>
+                <FaDiscord size={23} />
+              </ProjectLinks>
+              <ProjectLinks url={project.telegram}>
+                <FaTelegram size={23} />
+              </ProjectLinks>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="grid grid-cols-1 gap-4 py-5 sm:grid-cols-2 lg:grid-cols-3">
+        {images.map((image, index) => (
+          <AspectRatio ratio={1} key={index}>
+            <Image
+              src={image.url}
+              alt={`image`}
+              fill
+              className="object-cover"
+            />
+          </AspectRatio>
+        ))}
+      </div>
+    </main>
+  )
 }
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
diff --git a/database/migrations/0001_loving_blue_shield.sql b/database/migrations/0001_loving_blue_shield.sql
@@ -0,0 +1 @@
+ALTER TABLE "projects" DROP COLUMN IF EXISTS "wechat";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		ALTER TABLE "projects" DROP COLUMN IF EXISTS "wechat";