feat(admin): 🔨 add header

MuttakinHasib · Nov 15, 2023 · 1c42bca · 1c42bca
1 parent f2fb52d
commit 1c42bca
Show file tree

Hide file tree

Showing 6 changed files with 164 additions and 8 deletions.
diff --git a/apps/admin/src/components/header/index.tsx b/apps/admin/src/components/header/index.tsx
@@ -1,5 +1,25 @@
 import React from 'react';
+import { Bars3Icon, SunIcon } from '@heroicons/react/24/outline';
+import { Avatar, AvatarFallback, AvatarImage, Input } from '@aafiyah/ui';
 
 export const Header = () => {
-  return <header className=""></header>;
+  return (
+    <header className="px-6 py-3 shadow-md flex items-center justify-between gap-10 bg-white">
+      <div className="flex flex-1 items-center space-x-5">
+        <button>
+          <Bars3Icon className="w-6 h-6" />
+        </button>
+        <Input className="max-w-xs" placeholder="Search here" />
+      </div>
+      <div className="flex items-center space-x-5">
+        <button className="hover:text-black text-gray-500 transition-colors duration-300">
+          <SunIcon className="w-8 h-8" />
+        </button>
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+      </div>
+    </header>
+  );
 };
diff --git a/apps/admin/src/components/sidebar/index.tsx b/apps/admin/src/components/sidebar/index.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 export const Sidebar = () => {
   return (
-    <aside className="fixed w-72 h-screen shadow-lg">
+    <aside className="fixed w-72 h-screen shadow-lg bg-white">
       <div className="h-20 flex items-center px-4">
         <Link href="/" className="h-full block aspect-video relative">
           <Image src="/aafiyah-logo.svg" fill alt="Aafiyah Logo" />

diff --git a/apps/admin/src/layouts/index.tsx b/apps/admin/src/layouts/index.tsx
@@ -4,11 +4,11 @@ import { Header } from '../components/header';
 
 const RootLayoutWrapper = (props: PropsWithChildren) => {
   return (
-    <main className="min-h-screen">
+    <main className="min-h-screen bg-gray-50">
       <Sidebar />
       <div className="ml-72">
         <Header />
-        {props.children}
+        <div className="px-16 py-10">{props.children}</div>
       </div>
     </main>
   );

diff --git a/apps/admin/src/styles/global.css b/apps/admin/src/styles/global.css
@@ -1,3 +1,64 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 24.6 95% 53.1%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20.5 90.2% 48.2%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  html {
+    scroll-behavior: smooth;
+    @apply font-roboto;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: 'rlig' 1, 'calt' 1;
+  }
+}
diff --git a/apps/admin/tailwind.config.js b/apps/admin/tailwind.config.js
@@ -3,6 +3,7 @@ const { join } = require('path');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: ['class'],
   content: [
     join(
       __dirname,
@@ -11,7 +12,81 @@ module.exports = {
     ...createGlobPatternsForDependencies(__dirname),
   ],
   theme: {
-    extend: {},
+    screens: {
+      sm: '576px',
+      md: '768px',
+      lg: '992px',
+      xl: '1200px',
+      xxl: '1400px',
+    },
+    extend: {
+      container: {
+        center: true,
+        padding: '1rem',
+      },
+      fontFamily: {
+        roboto: ['var(--font-roboto)'],
+      },
+      boxShadow: {
+        header: '0 1px 3px rgba(0, 0, 0, .09)',
+        box: '0 1px 3px rgba(0, 0, 0, .09)',
+      },
+      colors: {
+        brand: '#F58E2B',
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/forms'), require('tailwindcss-animate')],
 };
diff --git a/libs/ui/src/components/form/input.tsx b/libs/ui/src/components/form/input.tsx
@@ -17,7 +17,7 @@ export const Input = forwardRef(
   (props: InputProps, ref: ForwardedRef<HTMLInputElement>) => {
     const { className, error, ...rest } = props;
     return (
-      <div className="space-y-2">
+      <div className="space-y-2 w-full">
         <input
           {...rest}
           ref={ref}