Changes

factorialco · Apr 8, 2024 · c3a2549 · c3a2549
1 parent f3b4deb
commit c3a2549
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 74 deletions.
diff --git a/src/experiments/application/new/employees.tsx b/src/experiments/application/new/employees.tsx
@@ -10,8 +10,6 @@ import {
   TableRow,
 } from "@/foundations/table"
 
-import { PageTitle } from "./pages"
-
 export const Employees = [
   {
     firstName: "Arthur",
@@ -61,50 +59,63 @@ export const Employees = [
     job: "Key Account Manager",
     status: "Terminated",
   },
+  {
+    firstName: "Maxwell",
+    lastName: "Fox",
+    avatar: 53,
+    avatarFallback: "MB",
+    job: "Sales Operations Manager",
+    status: "Active",
+  },
+  {
+    firstName: "Phillip",
+    lastName: "Hawkins",
+    avatar: 52,
+    avatarFallback: "MB",
+    job: "Sales Development Representative",
+    status: "Onboarding",
+  },
 ]
 
 export const PageEmployees: React.FC = () => {
   const { setLayoutType } = useLayoutType()
 
   return (
     <div>
-      <PageTitle title="Employees" />
-      <div>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>First name</TableHead>
-              <TableHead>Last name</TableHead>
-              <TableHead>Job</TableHead>
-              <TableHead>Status</TableHead>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>First name</TableHead>
+            <TableHead>Last name</TableHead>
+            <TableHead>Job</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Employees.map((employee, index) => (
+            <TableRow
+              key={index}
+              className="hover:cursor-pointer"
+              onClick={() => setLayoutType!("Split")}
+            >
+              <TableCell className="font-medium">
+                <div className="flex flex-row items-center gap-3">
+                  <Avatar size="small">
+                    <AvatarImage
+                      src={`https://i.pravatar.cc/150?img=${employee.avatar}`}
+                    />
+                    <AvatarFallback>{employee.avatarFallback}</AvatarFallback>
+                  </Avatar>
+                  <div>{employee.firstName}</div>
+                </div>
+              </TableCell>
+              <TableCell>{employee.lastName}</TableCell>
+              <TableCell>{employee.job}</TableCell>
+              <TableCell>{employee.status}</TableCell>
             </TableRow>
-          </TableHeader>
-          <TableBody>
-            {Employees.map((employee, index) => (
-              <TableRow
-                key={index}
-                className="hover:cursor-pointer"
-                onClick={() => setLayoutType!("Split")}
-              >
-                <TableCell className="font-medium">
-                  <div className="flex flex-row items-center gap-3">
-                    <Avatar size="small">
-                      <AvatarImage
-                        src={`https://i.pravatar.cc/150?img=${employee.avatar}`}
-                      />
-                      <AvatarFallback>{employee.avatarFallback}</AvatarFallback>
-                    </Avatar>
-                    <div>{employee.firstName}</div>
-                  </div>
-                </TableCell>
-                <TableCell>{employee.lastName}</TableCell>
-                <TableCell>{employee.job}</TableCell>
-                <TableCell>{employee.status}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+          ))}
+        </TableBody>
+      </Table>
     </div>
   )
 }
diff --git a/src/experiments/application/new/index.tsx b/src/experiments/application/new/index.tsx
@@ -135,10 +135,15 @@ const Layout = () => {
                 </ScrollArea>
               </div>
             )}
-            <ScrollArea className="h-[calc(100vh-2rem)] min-w-80 rounded-2xl bg-card">
-              {activeSubItem?.component || activeItem?.component}
-              <ScrollBar orientation="horizontal" />
-            </ScrollArea>
+            <div className="h-[calc(100vh-2rem)] w-full rounded-2xl bg-card">
+              <div className="flex h-[72px] w-full items-center px-6 text-xl text-secondary-foreground">
+                Title
+              </div>
+              <ScrollArea className="h-[calc(100vh-106px)]">
+                {activeSubItem?.component || activeItem?.component}
+                <ScrollBar orientation="horizontal" />
+              </ScrollArea>
+            </div>
           </div>
           <ScrollArea
             className={cn(

diff --git a/src/experiments/application/new/layout-type.tsx b/src/experiments/application/new/layout-type.tsx
@@ -1,12 +1,15 @@
-import { createContext, useContext, useState, Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, createContext, useContext } from "react"
 
 type LayoutTypeContextProps = {
-  layoutType: string,
+  layoutType: string
   setLayoutType: Dispatch<SetStateAction<string>> | null
 }
 
-export const LayoutTypeContext = createContext<LayoutTypeContextProps>({ layoutType: 'Regular', setLayoutType: null });
+export const LayoutTypeContext = createContext<LayoutTypeContextProps>({
+  layoutType: "Regular",
+  setLayoutType: null,
+})
 
-export function useLayoutType() : LayoutTypeContextProps {
-  return useContext(LayoutTypeContext);
-}
+export function useLayoutType(): LayoutTypeContextProps {
+  return useContext(LayoutTypeContext)
+}
diff --git a/src/experiments/application/new/pages.tsx b/src/experiments/application/new/pages.tsx
@@ -9,28 +9,19 @@ import {
 
 import { PageEmployees } from "./employees"
 
-export const PageTitle: React.FC<{ title: string }> = ({ title }) => {
-  return (
-    <div className="flex h-[72px] w-full items-center bg-card px-6 text-xl text-secondary-foreground">
-      {title}
-    </div>
-  )
-}
-
-const PageHome: React.FC = () => {
-  return (
-    <div>
-      <PageTitle title="Home" />
-      <p>This is the homepage!</p>
-    </div>
-  )
-}
+import { Skeleton } from "@/foundations/skeleton"
 
-const PageInbox: React.FC = () => {
+const PageDummy: React.FC = () => {
   return (
     <div>
-      <PageTitle title="Inbox" />
-      <p>This is the inbox!</p>
+      <div className="px-6">
+        {Array.from({ length: 30 }, (_, index) => (
+          <Skeleton
+            key={index}
+            className={`mb-5 h-[20px] rounded-full ${["w-96", "w-80", "w-72", "w-64", "w-60", "w-56"][Math.floor(Math.random() * 6)]}`}
+          />
+        ))}
+      </div>
     </div>
   )
 }
@@ -51,13 +42,13 @@ export const Pages: Page[] = [
   {
     title: "Home",
     icon: Home,
-    component: <PageHome />,
+    component: <PageDummy />,
     subItems: [],
   },
   {
     title: "Inbox",
     icon: Inbox,
-    component: <PageInbox />,
+    component: <PageDummy />,
     subItems: [],
   },
   {
@@ -67,11 +58,11 @@ export const Pages: Page[] = [
     subItems: [
       {
         title: "Profile",
-        component: "Profile SubMenu one component content",
+        component: <PageDummy />,
       },
       {
         title: "Personal",
-        component: "Profile SubMenu two component content",
+        component: <PageDummy />,
       },
     ],
   },
@@ -86,18 +77,18 @@ export const Pages: Page[] = [
       },
       {
         title: "Teams",
-        component: "These are the teams...",
+        component: <PageDummy />,
       },
       {
         title: "Jobs",
-        component: "These are the jobs...",
+        component: <PageDummy />,
       },
     ],
   },
   {
     title: "Settings",
     icon: Settings,
-    component: "Settings Component content",
+    component: <PageDummy />,
     subItems: [],
   },
 ]