landing page nav bar

packages/interface/src/components/file/Sidebar.tsx

@@ -12,8 +12,8 @@ import { useBridgeCommand, useBridgeQuery } from '@sd/client';
 import RunningJobsWidget from '../jobs/RunningJobsWidget';
 import { AppPropsContext } from '../../App';
 
-import Folder from '../../assets/svg/folder.svg?component';
-import FolderWhite from '../../assets/svg/folder-white.svg?component';
+import { ReactComponent as Folder } from '../../assets/svg/folder.svg';
+import { ReactComponent as FolderWhite } from '../../assets/svg/folder-white.svg';
 
 interface SidebarProps extends DefaultProps {}
 

packages/interface/src/screens/Overview.tsx

@@ -32,8 +32,8 @@ export const OverviewScreen: React.FC<{}> = (props) => {
     <div className="flex flex-col w-full h-screen">
       <div data-tauri-drag-region className="flex flex-shrink-0 w-full h-7" />
       <div className="flex flex-col w-full h-screen px-5 pb-3 overflow-scroll">
-        <div className="flex items-center justify-center w-full">
-          <div className="flex flex-wrap">
+        <div className="flex items-center w-full px-2">
+          <div className="flex flex-wrap space-x-4">
             <StatItem name="Total capacity" value="26.5" unit="TB" />
             <StatItem name="Index size" value="103" unit="MB" />
             <StatItem name="Preview media" value="23.5" unit="GB" />
@@ -45,6 +45,12 @@ export const OverviewScreen: React.FC<{}> = (props) => {
 
         <hr className="my-5 border-gray-50 dark:border-gray-600" />
         <div className="mt-2 space-x-1">
+          <FileItem
+            selected={selectedFile == 'assets'}
+            onClick={() => handleSelect('assets')}
+            fileName="assets"
+            folder
+          />
           <FileItem
             selected={selectedFile == 'tsx'}
             onClick={() => handleSelect('tsx')}
@@ -52,6 +58,12 @@ export const OverviewScreen: React.FC<{}> = (props) => {
             format="tsx"
             iconName="reactts"
           />
+          <FileItem
+            selected={selectedFile == 'asc'}
+            onClick={() => handleSelect('asc')}
+            fileName="asc"
+            folder
+          />
           <FileItem
             selected={selectedFile == 'scss'}
             onClick={() => handleSelect('scss')}
@@ -62,9 +74,9 @@ export const OverviewScreen: React.FC<{}> = (props) => {
           <FileItem
             selected={selectedFile == 'pug'}
             onClick={() => handleSelect('pug')}
-            fileName="cool.pug"
+            fileName="tailwind.conf.js"
             format="pug"
-            iconName="pug"
+            iconName="tailwind"
           />
           <FileItem
             selected={selectedFile == 'vite'}

pnpm-lock.yaml

@@ -77,6 +77,7 @@ importers:
       '@types/react-dom': ^18.0.0
       '@vitejs/plugin-react': ^1.3.1
       autoprefixer: ^10.4.4
+      clsx: ^1.1.1
       phosphor-react: ^1.4.1
       postcss: ^8.4.12
       react: ^18.0.0
@@ -92,6 +93,7 @@ importers:
       '@sd/core': link:../../core
       '@sd/interface': link:../../packages/interface
       '@sd/ui': link:../../packages/ui
+      clsx: 1.1.1
       phosphor-react: 1.4.1_react@18.0.0
       react: 18.0.0
       react-dom: 18.0.0_react@18.0.0
@@ -5132,7 +5134,7 @@ packages:
       vite: ^2.6.0
     dependencies:
       '@svgr/core': 6.2.1
-      vite: 2.9.5_sass@1.50.0
+      vite: 2.9.5
     transitivePeerDependencies:
       - supports-color
     dev: true