Left Navbar implementation

pages/index.tsx

@@ -42,6 +42,7 @@ import { InstanceViewLayout } from 'components/DashboardLayout/InstanceViewLayou
 import { SettingsLayout } from 'components/DashboardLayout/SettingsLayout';
 import { toast } from 'react-toastify';
 import RequireSetup from 'utils/router/RequireSetup';
+import InstanceTabs from 'pages/InstanceTabs/InstanceTabs';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -52,6 +53,15 @@ const queryClient = new QueryClient({
   },
 });
 
+const InstanceTabList = [
+  'overview',
+  'settings',
+  'console',
+  'files',
+  'tasks',
+  'logs',
+];
+
 export default function App() {
   const { location, setSearchParam } = useContext(BrowserLocationContext);
 
@@ -226,7 +236,7 @@ export default function App() {
         >
           <Routes>
             <Route element={<LoginLayout />}>
-              <Route path="/first_setup" element={<FirstTime />}  />
+              <Route path="/first_setup" element={<FirstTime />} />
               <Route
                 path="/login/core/select"
                 element={
@@ -279,7 +289,14 @@ export default function App() {
               }
             >
               <Route element={<InstanceViewLayout />}>
-                <Route path="/dashboard" element={<Dashboard />} />
+                {/* <Route path="/dashboard" element={<Dashboard />} /> */}
+                {InstanceTabList.map((path, i) => (
+                  <Route
+                    path={`/dashboard/${path}`}
+                    element={<InstanceTabs />}
+                    key={i}
+                  />
+                ))}
                 <Route path="/" element={<Home />} />
               </Route>
               <Route element={<SettingsLayout />}>

src/components/Atoms/Button.tsx

@@ -20,13 +20,15 @@ const buttonClasses = cva(
         start: 'justify-start',
         center: 'justify-center',
         end: 'justify-end',
+        between: 'justify-between',
       },
       size: {
         slim: ['gap-1 rounded-sm p-1 text-small'],
         medium: ['gap-1.5 rounded py-1 px-2 text-medium'],
         large: ['gap-1.5 rounded py-1.5 px-3 text-h3'],
       },
       intention: {
+        none: [],
         info: [
           'text-gray-300 disabled:text-white/50',
           'font-medium',
@@ -107,11 +109,13 @@ const Button = forwardRef(
       >
         {iconComponent}
         {icon && <FontAwesomeIcon icon={icon} className="w-4 opacity-50" />}
-        <div className={`flex items-center`}>
+        <div className={`flex grow items-center truncate`}>
           {loading && (
             <BeatLoader size={5} color="#6b7280" className="absolute" />
           )}
-          <span className={clsx(loading && 'opacity-0')}>{label}</span>
+          <span className={clsx(loading && 'opacity-0') + 'truncate'}>
+            {label}
+          </span>
         </div>
 
         {iconRight && (

src/components/Atoms/IconButton.tsx

@@ -0,0 +1,85 @@
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { forwardRef } from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+import { myTwMerge } from 'utils/util';
+
+const buttonClasses = cva(
+  [
+    'group flex',
+    'select-none flex-row flex-nowrap items-center',
+    'leading-normal tracking-medium aspect-square',
+  ],
+  {
+    variants: {
+      align: {
+        start: 'justify-start',
+        center: 'justify-center',
+        end: 'justify-end',
+      },
+      size: {
+        slim: [''],
+        medium: ['gap-2.5 rounded p-1.5 text-medium'],
+        large: [''],
+      },
+      intention: {
+        default: [
+          'text-gray-faded/30 enabled:hover:text-white/50 disabled:text-gray-900',
+          'outline outline-1 rounded',
+          'bg-gray-800 border-gray-faded/30 enabled:hover:bg-gray-700 enabled:hover:border-gray-faded/50 enabled:active:bg-gray-800 enabled:active:border-gray-faded/50 disabled:border-fade-700/10',
+          'outline-gray-faded/30 enabled:hover:outline-white/50',
+          'focus-visible:outline-none enabled:focus-visible:ring-4 enabled:focus-visible:ring-blue-faded/50',
+        ],
+      },
+    },
+    defaultVariants: {
+      align: 'center',
+      size: 'medium',
+      intention: 'default',
+    },
+  }
+);
+
+export interface IconButtonProps extends VariantProps<typeof buttonClasses> {
+  disabled?: boolean;
+  className?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  type?: 'button' | 'submit' | 'reset';
+  icon?: IconDefinition;
+}
+
+// A styled button component
+const IconButton = forwardRef(
+  (
+    {
+      disabled = false,
+      align,
+      intention,
+      size,
+      className,
+      icon,
+      type = 'button',
+      ...props
+    }: IconButtonProps,
+    ref: React.Ref<HTMLButtonElement>
+  ) => {
+    return (
+      <button
+        className={myTwMerge(
+          buttonClasses({ align, intention, size }),
+          className
+        )}
+        disabled={disabled}
+        ref={ref}
+        type={type}
+        {...props}
+      >
+        {icon && <FontAwesomeIcon icon={icon} className="w-4" />}
+      </button>
+    );
+  }
+);
+
+IconButton.displayName = 'IconButton';
+
+export default IconButton;

src/components/Atoms/Label.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 
-export type LabelSize = 'small' | 'large';
+export type LabelSize = 'small' | 'medium' | 'large';
 
 export type LabelColor = 'green' | 'yellow' | 'red' | 'gray';
 
@@ -21,9 +21,9 @@ export default function Label({
   return (
     <span
       className={clsx(
-        `h-fit select-none whitespace-nowrap rounded-full font-bold tracking-medium`,
         {
           small: 'py-[0.125em] px-2 text-small font-medium tracking-medium',
+          medium: 'py-1 px-2 text-small font-medium tracking-medium',
           large: 'py-1 px-2 text-medium font-medium tracking-medium',
         }[size],
         {
@@ -32,7 +32,7 @@ export default function Label({
           red: 'bg-red-faded/25 text-red',
           gray: 'bg-gray-faded/30 text-gray-300',
         }[color],
-        className
+        `h-fit select-none whitespace-nowrap rounded-full font-bold tracking-medium ${className}`
       )}
       onClick={onClick}
       {...rest}