Layout colors, click on employees

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

Hide file tree

Showing 6 changed files with 98 additions and 18 deletions.
diff --git a/lib/foundations/badge.tsx b/lib/foundations/badge.tsx
@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/lib/styles.css b/lib/styles.css
@@ -42,6 +42,10 @@
     --ring: 172 42% 52%;
 
     --radius: 0.5rem;
+
+    --layout: 357 100% 96%;
+    --layout-intermediate: 356 77% 75%;
+    --layout-foreground: 342 100% 42%;
   }
 
   .dark {
@@ -81,6 +85,10 @@
     --input: 230 5% 24%;
     --input-hover: 235 5% 39%;
     --ring: 173 62% 31%;
+
+    --layout: 352 59% 15%;
+    --layout-intermediate: 351 56% 48%;
+    --layout-foreground: 352 100% 75%;
   }
 }
 

diff --git a/src/experiments/application/new/employees.tsx b/src/experiments/application/new/employees.tsx
@@ -1,5 +1,10 @@
 import { useLayoutType } from "./layout-type"
 
+import { cn } from "@/lib/utils"
+import { useState } from "react"
+
+import { Badge } from "@/foundations/badge"
+
 import { Avatar, AvatarFallback, AvatarImage } from "@/foundations/avatar"
 import {
   Table,
@@ -78,7 +83,8 @@ export const Employees = [
 ]
 
 export const PageEmployees: React.FC = () => {
-  const { setLayoutType } = useLayoutType()
+  const { setLayoutType, setEmployeeId } = useLayoutType()
+  const [activeEmployee, setActiveEmployee] = useState(-1)
 
   return (
     <div>
@@ -95,8 +101,15 @@ export const PageEmployees: React.FC = () => {
           {Employees.map((employee, index) => (
             <TableRow
               key={index}
-              className="hover:cursor-pointer"
-              onClick={() => setLayoutType!("Split")}
+              className={cn(
+                "hover:cursor-pointer",
+                activeEmployee === index ? "bg-accent" : ""
+              )}
+              onClick={() => {
+                setLayoutType!("Split")
+                setActiveEmployee(index)
+                setEmployeeId?.(index)
+              }}
             >
               <TableCell className="font-medium">
                 <div className="flex flex-row items-center gap-3">
@@ -111,7 +124,9 @@ export const PageEmployees: React.FC = () => {
               </TableCell>
               <TableCell>{employee.lastName}</TableCell>
               <TableCell>{employee.job}</TableCell>
-              <TableCell>{employee.status}</TableCell>
+              <TableCell>
+                <Badge>{employee.status}</Badge>
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>

diff --git a/src/experiments/application/new/index.tsx b/src/experiments/application/new/index.tsx
@@ -8,6 +8,8 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/foundations/avatar"
 
 import { Skeleton } from "@/foundations/skeleton"
 
+import { Employees } from "./employees"
+
 import {
   Tooltip,
   TooltipContent,
@@ -31,8 +33,8 @@ const Navigation: React.FC<{
             className={cn(
               "relative flex h-12 w-12 items-center justify-center rounded-2xl text-secondary-foreground transition-colors hover:cursor-pointer",
               activeItem.title === item.title
-                ? "bg-primary-intermediate/20 text-primary-foreground"
-                : "hover:bg-card/50"
+                ? "bg-layout-intermediate/20 text-layout-foreground"
+                : "hover:bg-layout-intermediate/10"
             )}
             key={item.title}
             onClick={() => {
@@ -79,18 +81,21 @@ const Layout = () => {
   }
 
   const [layoutType, setLayoutType] = useState("Regular")
+  const [employeeId, setEmployeeId] = useState<number>(0)
 
   if (!activeItem) return null
 
   return (
-    <LayoutTypeContext.Provider value={{ layoutType, setLayoutType }}>
+    <LayoutTypeContext.Provider
+      value={{ layoutType, setLayoutType, employeeId, setEmployeeId }}
+    >
       <TooltipProvider>
         <div
           className={cn(
-            "-m-4 grid h-screen grid-cols-1 gap-4 bg-primary py-4 pr-4",
+            "bg-layout -m-4 grid h-screen grid-cols-1 gap-4 py-4 pr-4",
             layoutType === "Regular"
               ? "md:grid-cols-[64px_1fr]"
-              : "md:grid-cols-[64px_1fr_2fr]"
+              : "md:grid-cols-[64px_1fr_1fr]"
           )}
         >
           <div className="ml-4 flex w-12 flex-col gap-1 pt-3">
@@ -106,7 +111,9 @@ const Layout = () => {
           <div
             className={cn(
               "grid h-[calc(100vh-2rem)] grid-cols-1 overflow-hidden rounded-2xl border bg-card/40 shadow-sm",
-              hasSubItems(activeItem) ? "md:grid-cols-[270px_1fr]" : ""
+              hasSubItems(activeItem)
+                ? "md:grid-cols-[270px_minmax(200px,_1fr)]"
+                : ""
             )}
           >
             {hasSubItems(activeItem) && (
@@ -120,8 +127,8 @@ const Layout = () => {
                       className={cn(
                         "flex h-10 items-center rounded-xl px-4 py-2 text-secondary-foreground transition-colors hover:cursor-pointer",
                         subItem === activeSubItem
-                          ? "bg-primary-intermediate/20 text-primary-foreground"
-                          : "hover:bg-primary-intermediate/10"
+                          ? "bg-layout-intermediate/20 text-layout-foreground"
+                          : "hover:bg-layout-intermediate/10"
                       )}
                       key={subItem.title}
                       onClick={() => {
@@ -137,7 +144,7 @@ const Layout = () => {
             )}
             <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
+                {activeSubItem?.title || activeItem?.title}
               </div>
               <ScrollArea className="h-[calc(100vh-106px)]">
                 {activeSubItem?.component || activeItem?.component}
@@ -155,21 +162,26 @@ const Layout = () => {
               <div className="h-32 w-full bg-primary-intermediate/10"></div>
               <div className="-mt-16 flex flex-col gap-4 px-6">
                 <Avatar size="xxlarge" className="border-8 border-card">
-                  <AvatarImage src="https://i.pravatar.cc/150?img=60" />
-                  <AvatarFallback>AM</AvatarFallback>
+                  <AvatarImage
+                    src={`https://i.pravatar.cc/150?img=${Employees[employeeId].avatar}`}
+                  />
+                  <AvatarFallback>
+                    {Employees[employeeId].avatarFallback}
+                  </AvatarFallback>
                 </Avatar>
                 <div className="flex flex-col gap-1">
                   <h1 className="text-3xl font-medium text-foreground">
-                    Arthur McCoy
+                    {Employees[employeeId].firstName}{" "}
+                    {Employees[employeeId].lastName}
                   </h1>
                   <h2 className="text-lg text-secondary-foreground">
-                    Sales Development Representative
+                    {Employees[employeeId].job}
                   </h2>
                 </div>
               </div>
             </div>
             <div className="px-6 pt-6">
-              {Array.from({ length: 10 }, (_, index) => (
+              {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)]}`}

diff --git a/src/experiments/application/new/layout-type.tsx b/src/experiments/application/new/layout-type.tsx
@@ -3,11 +3,15 @@ import { Dispatch, SetStateAction, createContext, useContext } from "react"
 type LayoutTypeContextProps = {
   layoutType: string
   setLayoutType: Dispatch<SetStateAction<string>> | null
+  employeeId: number
+  setEmployeeId: Dispatch<SetStateAction<number>> | null
 }
 
 export const LayoutTypeContext = createContext<LayoutTypeContextProps>({
   layoutType: "Regular",
   setLayoutType: null,
+  employeeId: 0,
+  setEmployeeId: null,
 })
 
 export function useLayoutType(): LayoutTypeContextProps {

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -65,6 +65,11 @@ export default {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
+        layout: {
+          DEFAULT: "hsl(var(--layout))",
+          foreground: "hsl(var(--layout-foreground))",
+          intermediate: "hsl(var(--layout-intermediate))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",