From 4c6b7677369e20f9e078ab34abff093e17f0f109 Mon Sep 17 00:00:00 2001
From: sajjad <sajjad.t.dev@gmail.com>
Date: Sun, 19 Nov 2023 01:16:43 +0330
Subject: [PATCH] fix ui

---
 package-lock.json                             |  82 +++++++-
 package.json                                  |   5 +-
 src/App.css                                   |   6 +-
 src/App.js                                    |  46 +++--
 src/components/Global/main-nav/MainNav.jsx    | 181 +++++++++++++++---
 .../Global/main-nav/MainNav.module.scss       |  17 +-
 .../Global/main-nav/MainNavItem.jsx           |  54 ++++--
 .../Global/profile-image/ProfileImage.jsx     |  13 ++
 .../profile-image/ProfileImage.module.scss    |  18 ++
 src/components/Global/slider/Slider.jsx       | 108 +++++++++++
 .../Global/slider/Slider.module.scss          |  25 +++
 src/components/Global/user-card/UserCard.jsx  |  26 +++
 .../Global/user-card/UserCard.module.scss     |  11 ++
 src/components/posts/Item.jsx                 | 117 +++++++++++
 src/components/posts/Item.module.scss         |  20 ++
 src/index.css                                 |   3 +
 src/views/dashboard/Dashboard.jsx             |  98 +++++++++-
 src/views/dashboard/Dashboard.module.css      |   0
 src/views/dashboard/Dashboard.module.scss     |  27 +++
 tailwind.config.js                            |   9 +
 20 files changed, 800 insertions(+), 66 deletions(-)
 create mode 100644 src/components/Global/profile-image/ProfileImage.jsx
 create mode 100644 src/components/Global/profile-image/ProfileImage.module.scss
 create mode 100644 src/components/Global/slider/Slider.jsx
 create mode 100644 src/components/Global/slider/Slider.module.scss
 create mode 100644 src/components/Global/user-card/UserCard.jsx
 create mode 100644 src/components/Global/user-card/UserCard.module.scss
 create mode 100644 src/components/posts/Item.jsx
 create mode 100644 src/components/posts/Item.module.scss
 delete mode 100644 src/views/dashboard/Dashboard.module.css
 create mode 100644 src/views/dashboard/Dashboard.module.scss
 create mode 100644 tailwind.config.js

diff --git a/package-lock.json b/package-lock.json
index 7fa5c2b..07fa84c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,10 +21,13 @@
         "react-redux": "^8.1.3",
         "react-scripts": "5.0.1",
         "styled-components": "^6.1.1",
+        "swiper": "^11.0.4",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
-        "react-router-dom": "^6.18.0"
+        "react-router-dom": "^6.18.0",
+        "sass": "^1.69.5",
+        "tailwindcss": "^3.3.5"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -9812,6 +9815,12 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "devOptional": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -15950,6 +15959,23 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -16979,6 +17005,24 @@
         "boolbase": "~1.0.0"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.4.tgz",
+      "integrity": "sha512-qtUxILrD4aD++rpKzGrkz3IAWL92f9uTrDwjb6HaNLmPvJhZCE/83DL+9w4kIgDDJeF6QKalV47rMBN77UOVYQ==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -17422,16 +17466,16 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=14.17"
+        "node": ">=4.2.0"
       }
     },
     "node_modules/unbox-primitive": {
@@ -25549,6 +25593,12 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
       "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA=="
     },
+    "immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
+      "devOptional": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -29777,6 +29827,17 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "sass": {
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "devOptional": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -30562,6 +30623,11 @@
         }
       }
     },
+    "swiper": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.4.tgz",
+      "integrity": "sha512-qtUxILrD4aD++rpKzGrkz3IAWL92f9uTrDwjb6HaNLmPvJhZCE/83DL+9w4kIgDDJeF6QKalV47rMBN77UOVYQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -30888,9 +30954,9 @@
       }
     },
     "typescript": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
-      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "peer": true
     },
     "unbox-primitive": {
diff --git a/package.json b/package.json
index eb0c68e..e732404 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "react-redux": "^8.1.3",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.1",
+    "swiper": "^11.0.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -43,6 +44,8 @@
     ]
   },
   "devDependencies": {
-    "react-router-dom": "^6.18.0"
+    "react-router-dom": "^6.18.0",
+    "sass": "^1.69.5",
+    "tailwindcss": "^3.3.5"
   }
 }
diff --git a/src/App.css b/src/App.css
index a255e3f..e05eecc 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,4 @@
 a {
-    text-decoration: none;
-    color: inherit;
-}
\ No newline at end of file
+  text-decoration: none;
+  color: inherit;
+}
diff --git a/src/App.js b/src/App.js
index 7753432..597d274 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,42 @@
-import './App.css';
-import { Outlet } from 'react-router-dom';
-import Grid from '@mui/material/Grid';
-import MainNav from './components/Global/main-nav/MainNav';
+import "./App.css";
+import { Outlet } from "react-router-dom";
+import Grid from "@mui/material/Grid";
+import MainNav from "./components/Global/main-nav/MainNav";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
 
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#0095f6",
+      // light: will be calculated from palette.primary.main,
+      // dark: will be calculated from palette.primary.main,
+      // contrastText: will be calculated to contrast with palette.primary.main
+    },
+    secondary: {
+      main: "#E0C2FF",
+      light: "#F5EBFF",
+      // dark: will be calculated from palette.secondary.main,
+      contrastText: "#47008F",
+    },
+    black: {
+      main: "#000",
+    },
+  },
+});
 function App() {
   return (
-    <div className="App">
-      <Grid container spacing={2}>
-        <Grid item xs={2}>
-          <MainNav />
+    <ThemeProvider theme={theme}>
+      <div className="App">
+        <Grid container spacing={2}>
+          <Grid item xs={1.8}>
+            <MainNav />
+          </Grid>
+          <Grid item xs={10.2}>
+            <Outlet />
+          </Grid>
         </Grid>
-      </Grid>
-      <Outlet />
-    </div>
+      </div>
+    </ThemeProvider>
   );
 }
 
diff --git a/src/components/Global/main-nav/MainNav.jsx b/src/components/Global/main-nav/MainNav.jsx
index 668a397..3410222 100644
--- a/src/components/Global/main-nav/MainNav.jsx
+++ b/src/components/Global/main-nav/MainNav.jsx
@@ -1,26 +1,163 @@
+// base
 import { Link } from "react-router-dom";
+import { useState } from "react";
+
+// components
 import MainNavItem from "./MainNavItem";
-import HomeIcon from '@mui/icons-material/Home';
+import { Divider, List, IconButton } from "@mui/material";
+import MuiDrawer from "@mui/material/Drawer";
+
+// Icons
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
+import HomeSharpIcon from "@mui/icons-material/HomeSharp";
+import SearchOutlinedIcon from "@mui/icons-material/SearchOutlined";
+import SearchSharpIcon from "@mui/icons-material/SearchSharp";
+import ExploreOutlinedIcon from "@mui/icons-material/ExploreOutlined";
+import ExploreSharpIcon from "@mui/icons-material/ExploreSharp";
+import SendIcon from "@mui/icons-material/Send";
+import SendOutlinedIcon from "@mui/icons-material/SendOutlined";
+import AddBoxOutlinedIcon from "@mui/icons-material/AddBoxOutlined";
+// styles
+import { styled, useTheme, Theme, CSSObject } from "@mui/material/styles";
+
+const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  padding: theme.spacing(0, 1),
+  // necessary for content to be below app bar
+  ...theme.mixins.toolbar,
+}));
+
+const openedMixin = (theme: Theme): CSSObject => ({
+  width: 240,
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.enteringScreen,
+  }),
+  overflowX: "hidden",
+});
+
+const closedMixin = (theme: Theme): CSSObject => ({
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  overflowX: "hidden",
+  width: `calc(${theme.spacing(7)} + 1px)`,
+  [theme.breakpoints.up("sm")]: {
+    width: `calc(${theme.spacing(7)} + 1px)`,
+  },
+});
+
+const Drawer = styled(MuiDrawer, {
+  shouldForwardProp: (prop) => prop !== "open",
+})(({ theme, open }) => ({
+  width: 240,
+  flexShrink: 0,
+  whiteSpace: "nowrap",
+  boxSizing: "border-box",
+  ...(open && {
+    ...openedMixin(theme),
+    "& .MuiDrawer-paper": openedMixin(theme),
+  }),
+  ...(!open && {
+    ...closedMixin(theme),
+    "& .MuiDrawer-paper": closedMixin(theme),
+  }),
+}));
 const MainNav = () => {
-    const navItems = [
-        {
-            text: 'Home',
-            path: '/',
-            icon: HomeIcon
-        }
-    ];
-    return (
-        <div>
-            {
-                navItems.map((navItem, i) => {
-                    return (
-                        <Link to={navItem.path} key={i}>
-                            <MainNavItem text={navItem.text} icon={navItem.icon} />
-                        </Link>
-                    )
-                })
-            }
-        </div >
-    )
+  const [activeItem, setActiveItem] = useState(0);
+  const navItems = [
+    {
+      text: "Home",
+      path: "/",
+      icon: HomeOutlinedIcon,
+      activeIcon: HomeSharpIcon,
+    },
+    {
+      text: "Search",
+      path: null,
+      icon: SearchOutlinedIcon,
+      activeIcon: SearchSharpIcon,
+    },
+    {
+      text: "Explore",
+      path: "/",
+      icon: ExploreOutlinedIcon,
+      activeIcon: ExploreSharpIcon,
+    },
+    {
+      text: "Messages",
+      path: "/messages",
+      icon: SendOutlinedIcon,
+      activeIcon: SendIcon,
+    },
+    {
+      text: "Create",
+      path: "/",
+      icon: AddBoxOutlinedIcon,
+    },
+    {
+      text: "Profile",
+      path: "/",
+      icon: SearchOutlinedIcon,
+    },
+  ];
+  const [open, setOpen] = useState(true);
+  const handleListItemClick = (index) => {
+    setActiveItem(index);
+    if (!navItems[index].path) {
+      handleDrawerClose();
+    }
+  };
+
+  const handleDrawerOpen = () => {
+    setOpen(true);
+  };
+
+  const handleDrawerClose = () => {
+    setOpen(false);
+  };
+  return (
+    <div>
+      <Drawer variant="permanent" open={open}>
+        <DrawerHeader>
+          {open ? (
+            <IconButton className="p-0" onClick={handleDrawerClose}>
+              <ChevronLeftIcon />
+            </IconButton>
+          ) : (
+            <IconButton className="p-0" onClick={handleDrawerOpen}>
+              <ChevronRightIcon />
+            </IconButton>
+          )}
+        </DrawerHeader>
+        <Divider />
+        <List>
+          {navItems.map((navItem, i) => {
+            return (
+              <Link to={navItem.path} key={i}>
+                <MainNavItem
+                  onClick={(e) => {
+                    !navItem.path ?? e.preventDefault();
+                    handleListItemClick(i);
+                  }}
+                  text={navItem.text}
+                  icon={navItem.icon}
+                  activeIcon={navItem.activeIcon}
+                  index={i}
+                  activeItem={activeItem}
+                  open={open}
+                />
+              </Link>
+            );
+          })}
+        </List>
+      </Drawer>
+    </div>
+  );
 };
-export default MainNav;
\ No newline at end of file
+export default MainNav;
diff --git a/src/components/Global/main-nav/MainNav.module.scss b/src/components/Global/main-nav/MainNav.module.scss
index 930cde8..f913c50 100644
--- a/src/components/Global/main-nav/MainNav.module.scss
+++ b/src/components/Global/main-nav/MainNav.module.scss
@@ -1,5 +1,14 @@
-.main__nav__item {
-    .main__nav__item--text span {
-        font-size: 20px;
-    }
+.MainNavItem {
+  .MainNavItemText span {
+    color: gray;
+    font-size: 16px;
+  }
+  .MainNavItemIcon {
+    color: black;
+  }
+}
+.MainNavItemActive {
+  .MainNavItemText span {
+    color: black;
+  }
 }
diff --git a/src/components/Global/main-nav/MainNavItem.jsx b/src/components/Global/main-nav/MainNavItem.jsx
index 8be2e74..5df44fe 100644
--- a/src/components/Global/main-nav/MainNavItem.jsx
+++ b/src/components/Global/main-nav/MainNavItem.jsx
@@ -1,16 +1,44 @@
-import { ListItemButton, ListItemText, ListItemIcon } from '@mui/material';
-import styles from './MainNav.module.scss';
+import { ListItemButton, ListItemText, ListItemIcon } from "@mui/material";
+import styled from "./MainNav.module.scss";
 
-const MainNavItem = ({ text, path, icon }) => {
-    const MainNavItemIcon = icon;
-    return (
-        <ListItemButton className={styles.main__nav__item} href={path}>
-            <ListItemIcon className="main__nav__item--icon" sx={{ 'min-width': '30px' }}>
-                <MainNavItemIcon fontSize="large" />
-            </ListItemIcon>
-            <ListItemText className="main__nav__item--text" primary={text} />
-        </ListItemButton>
-    );
+const MainNavItem = ({
+  text,
+  path,
+  icon,
+  index,
+  onClick,
+  activeItem,
+  activeIcon,
+  open,
+}) => {
+  const MainNavItemIcon = index === activeItem ? activeIcon : icon;
+
+  return (
+    <ListItemButton
+      onClick={onClick}
+      className={`${styled.MainNavItem} ${
+        index === activeItem ? styled.MainNavItemActive : ""
+      }`}
+      href={path}
+      sx={{
+        minHeight: 48,
+        justifyContent: open ? "initial" : "center",
+        px: 2.5,
+      }}
+    >
+      <ListItemIcon
+        className={styled.MainNavItemIcon}
+        sx={{
+          minWidth: open ? 0 : "60px",
+          mr: 1,
+          justifyContent: 'center'
+        }}
+      >
+        <MainNavItemIcon fontSize="medium" />
+      </ListItemIcon>
+      <ListItemText className={styled.MainNavItemText} primary={text} />
+    </ListItemButton>
+  );
 };
 
-export default MainNavItem;
\ No newline at end of file
+export default MainNavItem;
diff --git a/src/components/Global/profile-image/ProfileImage.jsx b/src/components/Global/profile-image/ProfileImage.jsx
new file mode 100644
index 0000000..2e72982
--- /dev/null
+++ b/src/components/Global/profile-image/ProfileImage.jsx
@@ -0,0 +1,13 @@
+import styled from "./ProfileImage.module.scss";
+const ProfileImage = ({ image, title, active }) => {
+  return (
+    <div
+      className={`${styled.ImageListItem} ${
+        active ? styled.ImageListItemActive : ""
+      }`}
+    >
+      <img src={image} alt={title ? title : "image"} loading="lazy" />
+    </div>
+  );
+};
+export default ProfileImage;
diff --git a/src/components/Global/profile-image/ProfileImage.module.scss b/src/components/Global/profile-image/ProfileImage.module.scss
new file mode 100644
index 0000000..a127abd
--- /dev/null
+++ b/src/components/Global/profile-image/ProfileImage.module.scss
@@ -0,0 +1,18 @@
+.ImageListItem {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  margin: 0 auto;
+  border-radius: 50%;
+  &.ImageListItemActive {
+    background: linear-gradient(to right, red, orange) padding-box,
+      linear-gradient(to right, red, orange) border-box;
+    border: 2px solid transparent;
+  }
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
diff --git a/src/components/Global/slider/Slider.jsx b/src/components/Global/slider/Slider.jsx
new file mode 100644
index 0000000..e4d50bc
--- /dev/null
+++ b/src/components/Global/slider/Slider.jsx
@@ -0,0 +1,108 @@
+import styled from "./Slider.module.scss";
+import React from "react";
+import ArrowCircleRightTwoToneIcon from "@mui/icons-material/ArrowCircleRightTwoTone";
+import ArrowCircleLeftTwoToneIcon from "@mui/icons-material/ArrowCircleLeftTwoTone";
+import { useRef } from "react";
+// Import Swiper React components
+import { Swiper, SwiperSlide } from "swiper/react";
+
+// Import Swiper styles
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+// import required modules
+import { Navigation } from "swiper/modules";
+
+const Slider = ({ body, items, sliderBodyCallBack, slidesPerView = 8 }) => {
+  const swiperRef = useRef();
+  return (
+    <Swiper
+      slidesPerView={slidesPerView}
+      spaceBetween={3}
+      modules={[Navigation]}
+      className={styled.mySwiper}
+      onBeforeInit={(swiper) => {
+        swiperRef.current = swiper;
+      }}
+    >
+      <div
+        className={styled.CustomSwiperPrevButton}
+        onClick={() => swiperRef.current?.slidePrev()}
+      >
+        {items && items.length > 1 && (
+          <ArrowCircleLeftTwoToneIcon fontSize="medium" />
+        )}
+      </div>
+      {items &&
+        items.map((item, i) => (
+          <SwiperSlide key={i}>
+            {sliderBodyCallBack({ data: item, index: i })}
+          </SwiperSlide>
+        ))}
+      <div
+        className={styled.CustomSwiperNextButton}
+        onClick={() => swiperRef.current?.slideNext()}
+      >
+        {items && items.length > 1 && (
+          <ArrowCircleRightTwoToneIcon fontSize="medium" />
+        )}
+      </div>
+    </Swiper>
+  );
+};
+
+export default Slider;
+
+// function Body() {
+//   return null;
+// }
+
+// class Slider extends React.Component {
+//   static Body = Body;
+//   constructor(props) {
+//     super(props);
+//     this.swiperRef = React.createRef(null);
+//   }
+//   render() {
+//     // const swiperRef = useRef();
+//     const { children, items, sendDataToParent, handleCallBack } = this.props;
+//     const body = children;
+//     return (
+//       <Swiper
+//         slidesPerView={8}
+//         spaceBetween={3}
+//         modules={[Navigation]}
+//         className={styled.mySwiper}
+//         onBeforeInit={(swiper) => {
+//           this.swiperRef.current = swiper;
+//         }}
+//       >
+//         <div
+//           className={styled.CustomSwiperPrevButton}
+//           onClick={() => this.swiperRef.current?.slidePrev()}
+//         >
+//           <ArrowCircleLeftTwoToneIcon fontSize="medium" />
+//         </div>
+//         {items &&
+//           items.map((item, i) => {
+//             sendDataToParent(item, i);
+//             console.log(body);
+//             return (
+//               <SwiperSlide key={i}>
+//                 {body ? body.props.children : null}
+//                 {handleCallBack(item)}
+//               </SwiperSlide>
+//             );
+//           })}
+//         <div
+//           className={styled.CustomSwiperNextButton}
+//           onClick={() => this.swiperRef.current?.slideNext()}
+//         >
+//           <ArrowCircleRightTwoToneIcon fontSize="medium" />
+//         </div>
+//       </Swiper>
+//     );
+//   }
+// }
+
+// export default Slider;
diff --git a/src/components/Global/slider/Slider.module.scss b/src/components/Global/slider/Slider.module.scss
new file mode 100644
index 0000000..59d322f
--- /dev/null
+++ b/src/components/Global/slider/Slider.module.scss
@@ -0,0 +1,25 @@
+.ImageListItemBar {
+  text-align: center;
+  div {
+    font-size: 12px;
+  }
+}
+.mySwiper {
+  position: relative;
+  float: right;
+  width: 100%;
+}
+.CustomSwiperPrevButton {
+  position: absolute;
+  bottom: 45%;
+  left: 15px;
+  z-index: 99;
+  cursor: pointer;
+}
+.CustomSwiperNextButton {
+  position: absolute;
+  bottom: 45%;
+  right: 15px;
+  z-index: 99;
+  cursor: pointer;
+}
diff --git a/src/components/Global/user-card/UserCard.jsx b/src/components/Global/user-card/UserCard.jsx
new file mode 100644
index 0000000..4d0e734
--- /dev/null
+++ b/src/components/Global/user-card/UserCard.jsx
@@ -0,0 +1,26 @@
+// components
+import ProfileImage from "../profile-image/ProfileImage";
+import { Button } from "@mui/material";
+// styles
+import styled from "./UserCard.module.scss";
+const UserCard = ({ title, image, subTitle }) => {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center">
+        <div className={styled.UserCardImage}>
+          <ProfileImage image={image} title="user profile image" />
+        </div>
+        <div className="ml-3">
+          <div className="text-[14px] font-semibold">sajjad_talkhabi_</div>
+          <div className={`${styled.UserCardSubTitle} text-sm/4 text-gray-500`}>
+            followed by sajjad_talkhabi_
+          </div>
+        </div>
+      </div>
+      <Button variant="text" className="primary capitalize">
+        Follow
+      </Button>
+    </div>
+  );
+};
+export default UserCard;
diff --git a/src/components/Global/user-card/UserCard.module.scss b/src/components/Global/user-card/UserCard.module.scss
new file mode 100644
index 0000000..6aeaba8
--- /dev/null
+++ b/src/components/Global/user-card/UserCard.module.scss
@@ -0,0 +1,11 @@
+.UserCardImage {
+  width: 2.5vw;
+  height: 2.5vw;
+}
+
+.UserCardSubTitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 160px;
+}
diff --git a/src/components/posts/Item.jsx b/src/components/posts/Item.jsx
new file mode 100644
index 0000000..5f147af
--- /dev/null
+++ b/src/components/posts/Item.jsx
@@ -0,0 +1,117 @@
+// styles
+import styled from "./Item.module.scss";
+// components
+import Slider from "../Global/slider/Slider";
+import { TextField, Button } from "@mui/material";
+import ProfileImage from "../Global/profile-image/ProfileImage";
+
+// icons
+import MoreHorizOutlinedIcon from "@mui/icons-material/MoreHorizOutlined";
+import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
+import FavoriteSharpIcon from "@mui/icons-material/FavoriteSharp";
+import ChatBubbleOutlineOutlinedIcon from "@mui/icons-material/ChatBubbleOutlineOutlined";
+import SendSharpIcon from "@mui/icons-material/SendSharp";
+import BookmarkBorderOutlinedIcon from "@mui/icons-material/BookmarkBorderOutlined";
+import BookmarkSharpIcon from "@mui/icons-material/BookmarkSharp";
+// colors
+import { red } from "@mui/material/colors";
+
+const Post = () => {
+  const posts = [
+    {
+      img: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAJ4AngMBIgACEQEDEQH/xAAbAAABBQEBAAAAAAAAAAAAAAAGAQIDBAUHAP/EADgQAAEEAQMCBAQDBgYDAAAAAAEAAgMRBAUSITFBBhNRYSIycYEUUpEHI0KhweEVFjNi0fEkU7H/xAAZAQADAQEBAAAAAAAAAAAAAAABAgMEAAX/xAAiEQACAgICAgMBAQAAAAAAAAAAAQIRAyESMTJBEyJRYUL/2gAMAwEAAhEDEQA/AByuU4JT1Xu6881C8psrwyMueQGjkkpxNIf8SagDD+FhNucfir0TRXJ0BuiHP1YZL3NjNRt6OPc+yy5Xve6x0VeNw5NUWjuonyPJu1rUUiVllzqIbuFnqVPthDSS0u7WSVTi2h7S/d9itItjEVg8daciAqSNcJmGEHY7gBLP1vrwkkIjf8JsH+H0UjR5gLQLPUnsETiKN8jiGVYCtPgLBd0QSoW7A4tbZI60lc4MaXF3Hb3QOEc9uw2TY7rX0fUmxOEMji6M8Weo/ssJjfNG5poD1TY2Pif1JCElaCnR0Tr0TFS0XL/EYoY426P4VeJFrG1Toshjkwp7ykc4bVwSF5DeqrPnF8BTPaXdVF5LfRMhaNA9UoSHqvE0EgTG1/VDjMEEH+q7qfQIaaBvuRxc8jmyrHiJ9anJfcDuslrjuu+fVa8caiRk9llzd54PReaB0oH3pOD2bbNh3oOijEhc6r4TgLMEJf8AFXI7WrjmGRgvr3FchVsaabgNJF9AAiHS9EydQftDTzV8dErkkOoNmLHgPe2Qhp3AcWoKliaY3gt5sn3XS8HwJKHNMkpr8pV7K8AxSx042T+iX5EP8LOSg7bLb3HumTuDyLBsd7XUG/s+ia7mwP5lNm/Z5j7eGvBHThB5UgrA2cwhc3d8t+5UrpPgG4A+iJNW8IS4dmMuLfoheVpxsjZO2xymjNS6Jzxyh2bPh3La2Z8buC4IhZK2QEss0gWMBr2yBx+y0MXPmhcT5h2gdCUk8duzoyCgj3TSo8eXzomyDo4eqeVGih602koFpaXHFjuo53tihe9xoNbalVXVGh+BO0tJBYUF2c+gI1KY5eQ6XpfA+irsiN9j909wAoH6pgfR9lsWkZySQlrQDfsE7Dx3Sv8AhFnslx4TkyhtmiugeH9C8gNkbG17iOjjVJMk+KLYsfNmNo+izMex8jLLvlC6n4a0kwxl8oAe4gmlBg6XcjZp2sBb8rW9B7+6I8bjgBZnJyZtUVFaLzYWX2KmEYroFFG410UgceqrEixDGPQFV5oR6BWC4n0UclkJZJBjdmHqmGyWJzS2/suUeM9EdE3zoW3RXYso8EFDetYkc0DmuHHVSi+MrKyjyjRwsyloq6T45em7n0tWdXwxBqU0Q6BxpVoIy95ZtPAtbl1Z51Uwo8PO3YjmX8rlq0sXw3bTLGetArcIWWfZWI1oXkoXilGJmg2s/WsyPHgLDIGlw6FXZ3bI3uN8NPRAWdnSzSkvO/mhvuwnxxtiSdIrvJ3H06Jg4PCcSat20+lJrDZWoibXh+Lfks7rqWjg1GOyAPC2MdrZQO6PtPmix2NdO9sbR1Lj0WPK7Z6GCNRsKsdpLR9FoQRoXb4q02EhoL3D84FgK3F4v0rvkBg/3BCMWNKSCljU8jssfE1/Cymh2PkxPH+0rQZlscAQ4G1VUiTTJi1Me1NdlMrhZmoa7iYLbnmYz6lcwpMny4+qwdSafKcCq+T410q6Mx9gAqf+ZdOzXeWH7Sehcoyi+yikjmni2Py9ZPHzi1UwWD8dEfztK0vHZMeowFv8TTz9/wC6yYHkPa8Hlo4K1R8DHPzYT6fhMxWucBbpOSSVbKr4OXHkwNLLBHUKzdrO79jIafh5XtqceQkB4QCOn/038/wlc+zxGJ3mKnMvgjujjVQ+bT8iOI/G5hApCTdNnjhlLmElrb2kq+OkSlshlwmx6eyV1iR3NOHUdqVCIc8o8xtMiy9JxZZhTG4zTdXyhSTB/wDIDWklu7gpo5LtMplw0k0HHhDHrAa4jryFqTQxCcy5R3hvyt7BP0DF8rFgjH5QrmoaRLktLYnBt9ysjds2RVRSMefIxMncIcYOY3gyE7Wj7lYeXgQTPd5D8aQgctjy7IVkeHppxkRZz3NbRbEB8jD60FJ4c8KSQ50cmpSQyY0QIawODt3Xjp6klXilXZGfJukihpsRwJ28yxOH8Ll0rw3kS5EIo3QWA3QQ+VzSd0FnaHH4mfQ9x7In8JYv4Z5iI/VTb2VSpFnWZZMOIu7AXa5brGSc3Jcdz5nk9QaaPqV1jxljfiMMRtJaHOAJb6IDy/DsM+PkxPc0Bzah29Gn1I9fdFeQO4g1jYmEx26afFkeefLbk27/AIRBg/4bJGYfw4aehvlZWneF3x5Zk1SeOWNsexrQ7f7AdOyt6NoGTDO7a9zoL4BNEBNOvTEhyvaB3xxC+N+CTfDHtB9aIpD0DntPDS4+y6D+0fBazAxXgcsfV+l/9IPOOyKFjzw40Rx2VIS+qIZIPm2M07OkgymO5q6c1GDHB7Q5vQoT0+AzZQBHF3ddUUMFNFcJMnYsSW0qZ1NJ9qY42+FSzWOLZS3kFh+H7K47gKL+qKFNbwrGcvwhDFt/eeWQPX4XEEfzWbrOlxY+NHM1ptr2WCOi0PCWQzbLp0ttNl0R9FoeJcNroHTHcJHt2uYDwSOhSye7NsaljSJdFfuLL7IsxYmPAJQPos9Na490Z6bLuaCkXY3aHZXh6OZ3mRyPjceu3kFQs8Ou4DpZXfU0iLHe2gCVM8taLPCsoqibkwdk06LDjAb8ykwG+XmMIHXqpNTyGOnaxnxP/KEmmlzphvbtddKb8in+S/rTPgAPN0sp2m4+VFtczn17j6Lc1FglYCewWXjzmHIMcrasWD2KaWmJDxMs+GbcduRMGntavYulR4bKF/dbDZAWqvky/Cg0HZz79ouN52nMawWfNbxSFcvChHlRvYC+ONoohdA1dgyMqJjhbQ/dSCcyUTZUsnq7hGHRLMkkU4IRHJvrbxtaB2VsFR8cJbTGceDyn2owlQCK5Rv9kpKY48LgETp34zvNhcWyN5aV7I8eOdiugysa5aq2/Kf16KLL4iJ6+1IOy5N8riau+oVIwUuw/LKHTOnabLeHBK3o5oPHuiXS82gASgvwrL5+jY4J5aNv6LZYXxPFHj1WeSqVG3HK42HEOftN7uFDm6o41HEbcUPieQR7geArODbXB8z273dieiNj6G6hmu0t7MuS5ARTvZV9O8b47syzGWX+Ztf9rbngiyoCCWm1gZ/htkkZMbSPcJkgNm3qHjfGhxi/gnpVKrp2rP1rH8yKNzPLJokVZWTpnhoG3Sbn89XdkUYWNFhRbBQA6IP+gVIbi6k4NLJT8Q4S5GaC3grO1GMeaZYn12PuqEsj92w3aUa0V9b1cYZFC3y21h9OnKG668r3i+WsyCL8oDuO1n+ybuaWij19VRKkYssrkKEo5KaCvBEmSE0nXahceQE5pXHCvNJrk2S0t8LgFPUt5w3hho1+qD5ODyKNozzSfJIAsIZ1DDEbg5jrsfL1KrDQkgk8GTFuDXbzCEZMAkhPqgXwlubgTNIIc2Xdz9EV4WUAACVnyr7s3YX9Eb+K1s2OY75HKoahp2pvkD8GWJuznbICbSYuQY5hyaJRBDK10fX6JLKglE/xCHFsjG0O0UgapTkazGeMbNHr/EP5Ihmcx172jjoQoP8AFHQODC+QsHTbXCrGSZWLVGMc/WJBzj5fs0N2j+ibFl+IXO8mOAbXf+54ofots6s6VuwOdXqQpsYsrdQN9T6rpNHSaooabh5zTtzpGuc7mm9AFJLs/EPcPlA6qzm5RbGXt+Y8BDGu6mMDT3tLvjktorrykStmeUqQI67nHN1md7T+7a/Y37K/A/zImu9kLOlIlJHS+iJcA3hxGq+FaGqMN2y1aUHhR2nDolCOa4F1d1MBSrN+F9qcO5QoI1ySqCS0j3dPS+UQCPaCCDyFW8pu9x2jjoaVshROFXSICxpcY8yRgoB4Urt2PL3oFR6Sd05og0aNdlrZeOHtsBQyeRsxbgexsprwD/8AURaa8PaPQoIdujPFrS0vVvJcGSGvRLQ90HDsDf8AQrw8OwytvfRPVRYGsRPhG5wtX4tWhHSk8aC7Kn+Xooujr+yQ4IhYeVck1WMg8rF1TWoo47sWuaOvWynrE7I3Vfyjouf+IWSZmeQXcMoAfZEzZX5c7pXmxdoRztUjj1bIilB+F9BwCbH3ozZ3pFKXSxG9pL3G+CKW1CC2JrT1AUbHx5FFhulNVFVbfsghQnfRMKUIBHk9l4E33UdncCphS44QrwXqVbMyfw7BQtx6Lkr0dZYklZC0ulO1oFrEGPma1qAjikeyE8uN8NH9VWyppJiS9xJJWjouWcHJieBuDjtIVeDjF/okWnLfQV6fpkOn47IIB8LepPVx7krVbHuiql4RgsB9VNH8iwNtu2enFJKkYefiFtuCx5W39kaTQtfGUPZ+I1jyRSZAaM+HJnhrY40PUq0NWyWgUoBELUrIAU4B/wCPy5eN1D6pY43yOt5Lj7pzYGtIWliwta0P6lBgQjIvKg91z3xNgvhzpckNJjldw4dnei6PN8v1WdPjRS400czA5pB4IRxz4MTLj5IBNPe6OEG+Vtw5G5jXOHBHZZG1rAWs+UHhXsQ/uWrfxUls8/oviilVF5LTYJBKdHlPBAdyFN4n6GU/0uFPBTGOD2bqTgLUmqHs/9k=",
+    },
+  ];
+  return (
+    <div className={styled.PostItem}>
+      <div
+        className={`${styled.PostItemHeader} flex items-center justify-between`}
+      >
+        <div className={`${styled.PostItemHeaderAccount} flex items-center`}>
+          <div className={styled.PostItemHeaderAccountImage}>
+            <ProfileImage image={posts[0].img} alt={"fad"} active={true} />
+          </div>
+          <div
+            className={`${styled.PostItemHeaderAccountContent} flex ml-3 text-sm `}
+          >
+            <div className="font-semibold">sajjad_talkhabi_</div>
+            <div className={styled.PostItemHeaderAccountDot}>
+              <span></span>
+            </div>
+            <div className="text-gray-500">1h</div>
+            <div className="flex items-center">
+              <div className={styled.PostItemHeaderAccountDot}>
+                <span></span>
+              </div>
+              <div className="text-sky-600 capitalize tracking-wide">
+                follow
+              </div>
+            </div>
+          </div>
+        </div>
+        <MoreHorizOutlinedIcon />
+      </div>
+      <div className={styled.PostItemBody}>
+        <div className="flex">
+          <Slider
+            slidesPerView={1}
+            items={posts}
+            sliderBodyCallBack={({ data }) => (
+              <img
+                src={data.img}
+                alt="alt"
+                className="object-fit w-full rounded mt-3"
+              />
+            )}
+          />
+        </div>
+        <div className="flex items-center justify-between mt-2">
+          <div className="flex items-center">
+            <FavoriteBorderIcon sx={{ fontSize: 30 }} />
+            {/* <FavoriteSharpIcon sx={{ color: red[600], fontSize: 30 }} /> */}
+            <ChatBubbleOutlineOutlinedIcon
+              sx={{ fontSize: 30 }}
+              className="mx-2"
+            />
+            <SendSharpIcon
+              sx={{
+                transform: "rotate(-25deg)",
+                marginTop: "-5px",
+                fontSize: 30,
+              }}
+            />
+          </div>
+          <div>
+            <BookmarkBorderOutlinedIcon sx={{ fontSize: 30 }} />
+            <BookmarkSharpIcon sx={{ fontSize: 30 }} />
+          </div>
+        </div>
+        <div className="block text-sm font-semibold mt-4">6 likes</div>
+        <div className="block text-sm font-semibold">
+          sajjad_talkhabi_
+          <span className="font-normal ml-3">تجربش کردی؟🥲💔</span>
+        </div>
+        <div className="flex items-center mb-2">
+          <div className="block text-[14px] font-semibold mt-3">
+            mohammadh.safa
+            <span className="font-normal ml-3">اره جیب خالی😂</span>
+          </div>
+        </div>
+
+        <div className="flex items-center">
+          <TextField
+            placeholder="Add a comment"
+            color="black"
+            multiline
+            rows={1}
+            fullWidth
+            maxRows={4}
+            variant="standard"
+          />
+          <Button variant="text">Post</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Post;
diff --git a/src/components/posts/Item.module.scss b/src/components/posts/Item.module.scss
new file mode 100644
index 0000000..cdecab7
--- /dev/null
+++ b/src/components/posts/Item.module.scss
@@ -0,0 +1,20 @@
+.PostItem {
+  .PostItemHeader {
+    .PostItemHeaderAccount {
+      .PostItemHeaderAccountImage {
+        height: 2.5vw;
+        width: 2.5vw;
+      }
+    }
+  }
+  .PostItemHeaderAccountDot {
+    span {
+      height: 4px;
+      width: 4px;
+      margin: 0 8px;
+      background-color: #bbb;
+      border-radius: 50%;
+      display: inline-block;
+    }
+  }
+}
diff --git a/src/index.css b/src/index.css
index ec2585e..651ed53 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/src/views/dashboard/Dashboard.jsx b/src/views/dashboard/Dashboard.jsx
index c79aaf0..53b163a 100644
--- a/src/views/dashboard/Dashboard.jsx
+++ b/src/views/dashboard/Dashboard.jsx
@@ -1,7 +1,97 @@
-const Dashboard = () => (
+// components
+import Slider from "../../components/Global/slider/Slider";
+import PostItem from "../../components/posts/Item";
+import ProfileImage from "../../components/Global/profile-image/ProfileImage";
+import { ImageListItemBar, ImageListItem, Grid, Divider } from "@mui/material";
+// styles
+import styled from "./Dashboard.module.scss";
+import UserCard from "../../components/Global/user-card/UserCard";
+const Dashboard = () => {
+  const stories = [
+    {
+      img: "data:image/jpeg;base64,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",
+      author: "sajjad",
+      title: "story item",
+    },
+    {
+      img: "data:image/jpeg;base64,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",
+      author: "sajjad",
+      title: "story item",
+    },
+    {
+      img: "data:image/jpeg;base64,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",
+      author: "sajjad",
+      title: "story item",
+    },
+    {
+      img: "data:image/jpeg;base64,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",
+      author: "sajjad",
+      title: "story item",
+    },
+    {
+      img: "data:image/jpeg;base64,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",
+      author: "sajjad",
+      title: "story item",
+    },
+    {
+      img: "data:image/jpeg;base64,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",
+      author: "sajjad",
+      title: "story item",
+    },
+    {
+      img: "data:image/jpeg;base64,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",
+      author: "sajjad",
+      title: "story item",
+    },
+    {
+      img: "data:image/jpeg;base64,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",
+      author: "sajjad",
+      title: "story item",
+    },
+    {
+      img: "data:image/jpeg;base64,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",
+      author: "sajjad",
+      title: "story item",
+    },
+  ];
+  return (
     <div className="App">
-        dashboard
+      <Grid container spacing={2}>
+        <Grid item xs={8} paddingLeft={5} className="h-full">
+          <div className="mt-3 flex ml-60">
+            <Slider
+              items={stories}
+              sliderBodyCallBack={({ data }) => <StoryItem story={data} />}
+            />
+          </div>
+          <div className="ml-60 mr-20 px-20">
+            <PostItem />
+            <div className="mt-2">
+              <Divider />
+            </div>
+          </div>
+        </Grid>
+        <Grid item xs={4} className="px-20">
+          <div className="mt-7">
+            <UserCard image={stories[0].img} />
+          </div>
+        </Grid>
+      </Grid>
     </div>
-);
-
+  );
+};
+const StoryItem = ({ story }) => {
+  return (
+    <ImageListItem>
+      <div className={styled.StoryItemImage}>
+        <ProfileImage image={story.img} tilte={story.title} active={true} />
+      </div>
+      <ImageListItemBar
+        className={styled.ImageListItemBar}
+        position="below"
+        title={story.author}
+      />
+    </ImageListItem>
+  );
+};
 export default Dashboard;
diff --git a/src/views/dashboard/Dashboard.module.css b/src/views/dashboard/Dashboard.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/dashboard/Dashboard.module.scss b/src/views/dashboard/Dashboard.module.scss
new file mode 100644
index 0000000..60f7160
--- /dev/null
+++ b/src/views/dashboard/Dashboard.module.scss
@@ -0,0 +1,27 @@
+.ImageListItem {
+  position: relative;
+  width: 4vw;
+  height: 4vw;
+  overflow: hidden;
+  border-radius: 50%;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.StoryItemImage {
+  width: 4vw;
+  height: 4vw;
+}
+.swiper-button-next {
+  background-image: url("data:image/jpeg;base64,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");
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+  background-position: center;
+}
+
+.swiper-button-next::after {
+  display: none;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..31f16de
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  important: true,
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};