feat: updated to tailwind CSS

package.json

@@ -25,10 +25,13 @@
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
+    "postcss": "^8.4.39",
     "sass": "^1.77.8",
+    "tailwindcss": "^3.4.6",
     "typescript": "^5.2.2",
     "vite": "^5.3.4"
   },

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.tsx

@@ -1,4 +1,3 @@
-import './App.scss';
 import { Navbar } from './components/Navbar';
 import { HomePage } from './containers/HomePage';
 

src/components/Avatar/Avatar.tsx

@@ -0,0 +1,13 @@
+export const Avatar = ({ name = 'John Smith' }) => {
+  const initials = name
+    .split(' ')
+    .map(n => n[0])
+    .join('');
+  return (
+    <div
+      className={`inline-flex items-center justify-center h-10 w-10 rounded-full bg-blue-900 text-white`}
+    >
+      <span className="text-lg font-bold">{initials}</span>
+    </div>
+  );
+};

src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar } from './Avatar'

src/components/Navbar/Navbar.tsx

@@ -1,25 +1,25 @@
-import { Avatar, Divider } from '@mui/material';
-import './Navbar.scss';
+import { Avatar } from '../Avatar';
 
 export const Navbar = () => {
   return (
     <>
-      <header className="navbar__header">
-        <div className="navbar__header-container">
+      <header className="mx-8 my-6">
+        <div className="flex justify-between">
           <picture>
             <img
               src="public/smaplylogo.png"
               alt="Smaply Logo"
-              className="navbar__logo"
+              className="h-8 w-44"
             />
           </picture>
-          <div className="navbar__user-container">
-            <p className="navbar__username">John Smith</p>
-            <Avatar sx={{ bgcolor: 'purple', fontSize: '1.8rem' }}>JS</Avatar>
+          <div className="flex gap-3">
+            <p className="self-center font-medium text-base">John Smith</p>
+            <Avatar />
+            {/* <Avatar sx={{ bgcolor: 'purple', fontSize: '1.8rem' }}>JS</Avatar> */}
           </div>
         </div>
       </header>
-      <Divider sx={{ marginLeft: '2.4rem', marginRight: '2.4rem' }} />
+      <hr className="mx-6 border-solid border-slate-200"></hr>
     </>
   );
 };

src/components/PersonasMenu/PersonasMenu.tsx

@@ -17,6 +17,8 @@ import { Box, SvgIconTypeMap } from '@mui/material';
 import { OverridableComponent } from '@mui/material/OverridableComponent';
 import AddOutlinedIcon from '@mui/icons-material/AddOutlined';
 import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import SpaceDashboardOutlinedIcon from '@mui/icons-material/SpaceDashboardOutlined';
+import GridViewOutlinedIcon from '@mui/icons-material/GridViewOutlined';
 
 type DestinedIconsProps = {
   Icon: OverridableComponent<SvgIconTypeMap<{}, 'svg'>> & {
@@ -36,6 +38,50 @@ const DestinedIcons = ({ Icon }: DestinedIconsProps) => {
   );
 };
 
+type CustomListItemProps = {
+  Icon: OverridableComponent<SvgIconTypeMap<{}, 'svg'>> & {
+    muiName: string;
+  };
+  itemName: string;
+};
+
+const CustomListItem = ({ Icon, itemName }: CustomListItemProps) => {
+  return (
+    <Box sx={{ display: 'flex', padding: '1.2rem .8rem' }}>
+      <DestinedIcons Icon={Icon} />
+      <Typography
+        sx={{
+          marginLeft: '1rem',
+          alignSelf: 'center',
+          fontWeight: 500,
+          fontSize: '1.8rem'
+        }}
+      >
+        {itemName}
+      </Typography>
+    </Box>
+  );
+};
+
+const workSpaceItems = [
+  {
+    Icon: Person2OutlinedIcon,
+    itemName: 'Journey Maps'
+  },
+  {
+    Icon: Person2OutlinedIcon,
+    itemName: 'Personas'
+  },
+  {
+    Icon: SpaceDashboardOutlinedIcon,
+    itemName: 'Templates'
+  },
+  {
+    Icon: GridViewOutlinedIcon,
+    itemName: 'Portfolio'
+  }
+];
+
 export const PersonasMenu = () => {
   return (
     <Paper sx={{ width: 370, maxWidth: '100%', padding: '1.6rem' }}>
@@ -109,8 +155,58 @@ export const PersonasMenu = () => {
           </Box>
         </AccordionSummary>
         <AccordionDetails>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-          malesuada lacus ex, sit amet blandit leo lobortis eget.
+          <Accordion>
+            <AccordionSummary
+              expandIcon={<DestinedIcons Icon={ExpandMoreIcon} />}
+              aria-controls="panel1-content"
+              id="panel1-header"
+              sx={{
+                paddingLeft: '.8rem'
+              }}
+            >
+              <Box sx={{ display: 'flex', padding: '1.2rem .8rem' }}>
+                <DestinedIcons Icon={PeopleAltOutlinedIcon} />
+                <Typography
+                  sx={{
+                    marginLeft: '1rem',
+                    alignSelf: 'center',
+                    fontWeight: 500,
+                    fontSize: '1.8rem'
+                  }}
+                >
+                  My Workspace
+                </Typography>
+              </Box>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Box sx={{ display: 'flex', padding: '1.2rem .8rem' }}>
+                <DestinedIcons Icon={PeopleAltOutlinedIcon} />
+                <Typography
+                  sx={{
+                    marginLeft: '1rem',
+                    alignSelf: 'center',
+                    fontWeight: 500,
+                    fontSize: '1.8rem'
+                  }}
+                >
+                  Journey Maps
+                </Typography>
+              </Box>
+              <Box sx={{ display: 'flex', padding: '1.2rem .8rem' }}>
+                <DestinedIcons Icon={PeopleAltOutlinedIcon} />
+                <Typography
+                  sx={{
+                    marginLeft: '1rem',
+                    alignSelf: 'center',
+                    fontWeight: 500,
+                    fontSize: '1.8rem'
+                  }}
+                >
+                  Personas
+                </Typography>
+              </Box>
+            </AccordionDetails>
+          </Accordion>
         </AccordionDetails>
       </Accordion>
     </Paper>

src/containers/HomePage/HomePage.tsx

@@ -3,7 +3,7 @@ import './HomePage.scss';
 
 export const HomePage = () => {
   return (
-    <div className="homepage__container">
+    <div className="flex justify-center mt-8">
       <PersonasMenu />
     </div>
   );

src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
-import './index.scss';
+import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}