WIP: timeline side navbar

BacPacNet · Sep 23, 2024 · f3cd135 · f3cd135
1 parent c375301
commit f3cd135
Show file tree

Hide file tree

Showing 24 changed files with 796 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@apollo/client": "^3.10.4",
     "@as-integrations/next": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-tabs": "^1.1.0",
     "@tanstack/react-query": "^5.32.0",
     "@tsparticles/engine": "^3.3.0",
     "@tsparticles/react": "^3.0.0",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,6 +8,7 @@ import { ReactQueryClientProvider } from '@/utils/Provider'
 import ZustandSocketProvider from '@/utils/ZustandSocketProvider'
 
 import SecondaryNavbar from '@/components/Timeline/Navbar'
+import LogoNavbar from '@/components/atoms/LogoNavbar'
 type FontClassName = string
 
 const inter = Inter({
@@ -53,10 +54,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
       </head>
 
-      <body>
+      <body className="bg-surface-primary-50">
         <ReactQueryClientProvider>
           <ZustandSocketProvider>
             {/*<Navbar />*/}
+            <LogoNavbar />
             <SecondaryNavbar />
             {children}
           </ZustandSocketProvider>

diff --git a/src/app/v2/timeline/page.tsx b/src/app/v2/timeline/page.tsx
@@ -0,0 +1,28 @@
+import UniversityCard from '@/components/molecules/UniversityCard'
+import LeftNavbar from '@/components/organisms/LeftNavbar'
+import UserPostContainer from '@/components/organisms/UserPostContainer'
+import React from 'react'
+
+export default function Timeline() {
+  return (
+    <div className="flex h-screen gap-8  py-8 px-4">
+      <div className="w-1/5 hidden md:block">
+        <LeftNavbar />
+      </div>
+      <div className="w-3/5">
+        <UniversityCard
+          universityLogo={''}
+          universityName={'Lorem University'}
+          isAiPowered={true}
+          joinedSince={'07/12/23'}
+          description={
+            'Official community page for Lorem University. For inquiries contact the Human Resources Department in B-Wing of Northern Campus.'
+          }
+          memberCount={200}
+        />
+        <UserPostContainer />
+      </div>
+      <div className="w-1/5 rounded-2xl shadow-2xl bg-white hidden lg:block"></div>
+    </div>
+  )
+}
diff --git a/src/assets/avatar.png b/src/assets/avatar.png
diff --git a/src/assets/avatar.svg b/src/assets/avatar.svg
diff --git a/src/assets/round_logo.svg b/src/assets/round_logo.svg
diff --git a/src/assets/unibuzz_rounded.svg b/src/assets/unibuzz_rounded.svg
diff --git a/src/assets/university.jpg b/src/assets/university.jpg
diff --git a/src/assets/university_placeholder.jpg b/src/assets/university_placeholder.jpg
diff --git a/src/components/atoms/Card/index.tsx b/src/components/atoms/Card/index.tsx
@@ -0,0 +1,13 @@
+import React, { ReactNode, HTMLAttributes } from 'react'
+
+interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  children: ReactNode
+}
+
+export default function Card({ children, className = '', ...rest }: TitleProps) {
+  return (
+    <div className={`relative z-10 shadow-2xl bg-white py-8 ${className}`} {...rest}>
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/atoms/GroupSearchBox/index.css b/src/components/atoms/GroupSearchBox/index.css
@@ -0,0 +1,4 @@
+.group-search-input::placeholder {
+  font-size: 14px;
+  font-weight: 400;
+}