l-min-components 1.0.318 → 1.0.321

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.318",
+  "version": "1.0.321",
   "type": "module",
   "files": [
     "src/assets",
@@ -31,7 +31,7 @@
     "react-dom": "^18.2.0",
     "react-flags-select": "^2.2.3",
     "react-icons": "^4.8.0",
-    "react-input-emoji": "^5.1.1",
+    "react-input-emoji": "^5.3.1",
     "react-mic": "^12.4.6",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.8.2",
@@ -41,7 +41,7 @@
     "slate-history": "^0.93.0",
     "slate-react": "^0.94.0",
     "styled-components": "^5.3.6",
-    "wavesurfer.js": "^7.1.2"
+    "wavesurfer.js": "^7.1.5"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",

package/src/components/fileRightBar/assets/uploadProgressIcon.jsx

@@ -0,0 +1,3 @@
+export const UploadProgress = {
+    image: "https://s3-alpha-sig.figma.com/img/9765/16f7/85ab5a29a1abf82a0aa09c540b83e732?Expires=1694390400&Signature=YJha1jD90TcrTJ14Mn1H4zLdxO3ZDoPpfZWxKPcrguYCLurvCGmX9CnJeLShVVopff79pSCZYPBWuKU-ryeoxK7t7HRob9OF8M6hnVw7T93y8~jRTTWLV8pCOTPvVB~G2fuAc885jupB15aWYf6mgScqRNgqbxmvWDAldMY45cRWDyrhkE-YkrRiMlKlc7PklkgslBsQTwmr7PmmJB0n4rLKRGMllcjQgGfKG6kaTgqPZ-3KSyKb17GeaPkdmEqiT1Dzuoby9hyY21-yUO5htGzJsLt-~Xo09HVyhIU3tyM9CJYfWwup53KqZ96Zh8dLQBiuVZMZ-acoD4NIparwsA__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4",
+}

package/src/components/fileRightBar/components/progressBar/index.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+import styled from "styled-components";
+
+const SIZE = 150;
+const STROKE_WIDTH = 13;
+const CENTER = SIZE / 2;
+const RADIUS = CENTER - STROKE_WIDTH / 2;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+const ProgressBar = styled.svg`
+  transform: rotate(360deg);
+`;
+
+const BackgroundCircle = styled.circle`
+  fill: none;
+  stroke: #F5F7F7;
+  stroke-width: ${STROKE_WIDTH}px;
+  stroke-linecap: round;
+  
+`;
+
+const ProgressCircle = styled.circle`
+    fill: none;
+  stroke-width: ${STROKE_WIDTH}px;
+  stroke-linecap: round; // This will give the rounded ends
+  stroke-dasharray: ${props => props.dasharray || CIRCUMFERENCE};
+  stroke-dashoffset: ${props => props.offset};
+  transition: stroke-dashoffset 0.3s;
+
+  &[data-color="blue"] {
+    stroke: #1ABCFE;
+  }
+
+  &[data-color="yellow"] {
+    stroke: #FEBF10;
+  }
+
+  &[data-color="purple"] {
+    stroke: #A259FF;
+  }
+`;
+
+const ValueText = styled.text`
+  font-size: 14px;
+  text-anchor: middle;
+  dominant-baseline: middle;
+`;
+
+const CircularProgressBar = ({ value = 2.5, total = 5 }) => {
+    const progress = (value / total) * 100;
+    const offset = CIRCUMFERENCE - (progress / 100) * CIRCUMFERENCE;
+    
+    const segmentLength = CIRCUMFERENCE / 4 - 20; // adjust this to change the length of segments
+    const gap = 20; // adjust this to change the gap length
+  
+    return (
+    <ProgressBar width={SIZE} height={SIZE}>
+      <BackgroundCircle cx={CENTER} cy={CENTER} r={RADIUS} />
+      <ProgressCircle
+        cx={CENTER}
+        cy={CENTER}
+        r={RADIUS}
+        offset={offset * 1}
+        data-color="blue"
+      />
+      <ProgressCircle
+        cx={CENTER}
+        cy={CENTER}
+        r={RADIUS}
+        offset={offset * 0.25}
+        data-color="yellow"
+      />
+      <ProgressCircle
+        cx={CENTER}
+        cy={CENTER}
+        r={RADIUS}
+        offset={offset * 0.5}
+        data-color="blue"
+      />
+      <ProgressCircle
+        cx={CENTER}
+        cy={CENTER}
+        r={RADIUS}
+        offset={offset * 1.35}
+        data-color="purple"
+      />
+      <ValueText x={CENTER} y={CENTER}>
+        {`${value}GB / ${total}GB`}
+      </ValueText>
+    </ProgressBar>
+  );
+};
+
+export default CircularProgressBar;

package/src/components/fileRightBar/components/progressBar/progress.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+import styled from "styled-components";
+
+const SIZE = 150;
+const STROKE_WIDTH = 13;
+const CENTER = SIZE / 2;
+const RADIUS = CENTER - STROKE_WIDTH / 2;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+const ProgressBar = styled.svg`
+  transform: rotate(360deg);
+`;
+
+const BackgroundCircle = styled.circle`
+  fill: none;
+  stroke: #F5F7F7;
+  stroke-width: ${STROKE_WIDTH}px;
+  stroke-linecap: round;
+  
+`;
+
+const ProgressCircle = styled.circle`
+    fill: none;
+  stroke-width: ${STROKE_WIDTH}px;
+  stroke-linecap: round; // This will give the rounded ends
+  stroke-dasharray: ${props => props.dasharray || CIRCUMFERENCE};
+  stroke-dashoffset: ${props => props.offset};
+  transition: stroke-dashoffset 0.3s;
+
+  &[data-color="blue"] {
+    stroke: #1ABCFE;
+  }
+
+  &[data-color="yellow"] {
+    stroke: #FEBF10;
+  }
+
+  &[data-color="purple"] {
+    stroke: #A259FF;
+  }
+`;
+
+const ValueText = styled.text`
+  font-size: 14px;
+  text-anchor: middle;
+  dominant-baseline: middle;
+`;
+
+const CircularProgressBar = ({ value = 2.5, total = 5 }) => {
+    const progress = (value / total) * 100;
+    const offset = CIRCUMFERENCE - (progress / 100) * CIRCUMFERENCE;
+    
+    const segmentLength = CIRCUMFERENCE / 4 - 20; // adjust this to change the length of segments
+    const gap = 20; // adjust this to change the gap length
+  
+    return (
+    <ProgressBar width={SIZE} height={SIZE}>
+      <BackgroundCircle cx={CENTER} cy={CENTER} r={RADIUS} />
+      <ProgressCircle
+        cx={CENTER}
+        cy={CENTER}
+        r={RADIUS}
+        offset={offset * 1}
+        data-color="blue"
+      />
+      <ProgressCircle
+        cx={CENTER}
+        cy={CENTER}
+        r={RADIUS}
+        offset={offset * 0.25}
+        data-color="yellow"
+      />
+      <ProgressCircle
+        cx={CENTER}
+        cy={CENTER}
+        r={RADIUS}
+        offset={offset * 0.5}
+        data-color="blue"
+      />
+      <ProgressCircle
+        cx={CENTER}
+        cy={CENTER}
+        r={RADIUS}
+        offset={offset * 1.35}
+        data-color="purple"
+      />
+      <ValueText x={CENTER} y={CENTER}>
+        {`${value}GB / ${total}GB`}
+      </ValueText>
+    </ProgressBar>
+  );
+};
+
+export default CircularProgressBar;

package/src/components/fileRightBar/components/ugradeLock.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import {
+  Upgrade,
+} from "../styles";
+import Button from "../../button";
+import UpgradeIcon from "../assets/Feature.png";
+
+
+const UpgradeComponent = () => {
+
+  return (
+    
+    <Upgrade>
+       <img src={UpgradeIcon} alt="upgrad lock" />
+       <p>
+         Upgrade to <span>ENTERPRISE</span> for more features.
+       </p>
+       <Button
+        type="primary"
+        text="Upgrade"
+        styles={{
+          marginTop: "12px",
+          fontSize: "16px",
+          width: "200px",
+          height: "38.641px",
+          gap: "8px",
+          padding: "15.457px 30.913px",
+        }}
+      />
+    </Upgrade>
+  );
+};
+
+export default UpgradeComponent;

package/src/components/fileRightBar/components/users.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import {
+  Users,
+} from "../styles";
+import UploadOwner from "../assets/uploadOwner.png";
+
+const users = [
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+]
+
+const UsersList = () => {
+
+  return (
+     <Users>
+      <div className="top">
+          <h4>Users</h4>
+          <p>View All</p>
+        </div>
+
+        {users?.map((user) => (
+          <div className="table">
+            <div className="user">
+              <img src={UploadOwner} alt="user" />
+              <div className="text">
+                <h3>{user?.name}</h3>
+                <p>{user?.size}</p>
+              </div>
+            </div>
+
+          </div>
+         ))}
+
+    </Users>    
+  );
+};
+
+export default UsersList;

package/src/components/fileRightBar/managerPageRight.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import {
+  BannerWrapper,
+  Container,
+  Upgrade,
+  Users,
+  UploadProgressContainer
+} from "./styles";
+import Button from "../button";
+import CircularProgressBar from "./components/progressBar";
+import UpgradeIcon from "./assets/Feature.png";
+import { UploadProgress } from "./assets/uploadProgressIcon";
+import ProgressBar from "../progressBar";
+import UpgradeComponent from "./components/ugradeLock";
+
+
+
+const FileRightBar = () => {
+
+  return (
+    <Container>   
+     <UploadProgressContainer>
+      <div className="upload_icon">
+        <img src={UploadProgress?.image} alt="upload progress" />
+        <p>Uploading files</p>
+      </div>
+      <div className="progress">
+      <ProgressBar
+        value={50}
+        minValue={30}
+        maxValue={80}
+        size={"sm"}
+        color={"#30D468"}
+      />
+      <div className="text">
+        <div className="left">
+          <h5>2 of 6 Uploaded</h5>
+        </div>
+        <div className="right">
+          <p>3min 22sec</p>
+        </div>
+
+      </div>
+
+      </div>
+
+      <Button
+        type="primary"
+        text="Cancel Upload"
+        styles={{
+          marginTop: "10px",
+          fontSize: "14px",
+          width: "206px",
+          gap: "13px",
+          padding: "7px 26px",
+          height: "38.641px",
+          background: "#F39B33",
+        }}
+      />
+     
+    </UploadProgressContainer>
+    <BannerWrapper>
+      <div className="head">
+        <h3>Storage</h3>
+        <p>(50% Used)</p>
+      </div>
+      <CircularProgressBar value={2.5} total={5} />
+      <Button
+        type="primary"
+        text="Upgrade Storage"
+        styles={{
+          marginTop: "29px",
+          fontSize: "16px",
+          width: "200px",
+          gap: "8px",
+          padding: "15.457px 30.913px",
+          height: "38.641px",
+        }}
+      />
+    </BannerWrapper>
+    <UpgradeComponent />
+    
+    </Container>
+  );
+};
+
+export default FileRightBar;

package/src/components/fileRightBar/styles/index.jsx

@@ -0,0 +1,293 @@
+import styled from "styled-components";
+import { FaArrowRight } from "react-icons/fa";
+import BannerImg from "../assets/Vector19.png"
+
+export const Container = styled.div`
+  background-color: transparent;
+  max-width: 242px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  flex-direction: column;
+  padding: 10px;
+  border-radius: 30px; 
+
+  &.user_banner{
+    background-color: #fff;
+  }
+
+`;
+
+export const BannerWrapper = styled.div`
+  position: relative;
+  max-width: 232px;
+  padding: 30px 16px 21px;
+  overflow: hidden;
+ border-radius: 30px;
+  background: #FFF;
+  display: flex;
+  flex-direction: column;
+  /* justify-content: center; */
+  align-items: center;
+  text-align: center;
+  color: #23ffc8;
+  /* background-image: url(${BannerImg}); */
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-size: contain;
+  border:  none;
+  margin-bottom: 20px;
+  width: 100%;
+
+  .head{
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    h3{
+      color: var(--neutral-70, #636666);
+      font-family: Nunito;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 40px; /* 250% */
+      letter-spacing: 0.32px;
+      margin-right: 10px;
+    }
+    p{
+      color: var(--neutral-50, #949999);
+      font-family: Nunito;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 40px; /* 333.333% */
+      letter-spacing: 0.24px;
+    }
+  }
+
+`;
+
+export const BannerTitle = styled.h1`
+  font-size: 30px;
+  margin: 0;
+  font-weight: 800;
+  line-height: 42px;
+  color: #00C2C2;
+
+`;
+
+export const BannerSubtitle = styled.p`
+  font-size: 18px;
+  margin: 29px 0;
+  color: #00C2C2;
+  font-weight: 600;
+`;
+
+export const BannerImage = styled.img`
+  width: 100%;
+  max-width: 800px;
+  margin-bottom: -15px;
+  margin-top: -10px;
+  opacity: 2; 
+   display: block;
+   opacity: 1.0;
+`;
+
+export const BannerCTA = styled.button`
+  background-color: #ffbf1e;
+  color: #fff;
+  border: none;
+  padding: 10px 25px;
+  border-radius: 10px;
+  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  margin: auto 0 10px;
+  opacity: 1.0;
+
+  &:hover {
+    background-color: #0062cc;
+    cursor: pointer;
+  }
+`;
+
+export const ArrowIcon = styled(FaArrowRight)`
+  margin-left: 0.5rem;
+`;
+
+export const AbsoluteSVG = styled.svg`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: auto;
+`;
+
+
+export const Upgrade = styled.div`
+  background-color: #fff;
+  width: 100%;
+   max-width: 232px;
+  border-radius: 36px;
+  padding: 30px 16px 21px;
+  overflow: hidden;
+ border-radius: 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ p{
+  color: var(--neutral-80, #4A4D4D);
+  text-align: center;
+  font-family: Nunito;
+  font-size: 11.592px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: 0.773px;
+  width: 70%;
+  text-align: center;
+  margin-top: 10px;
+
+  span{
+    color: var(--primary-color-main, #FEBF10);
+    font-family: Nunito;
+    font-size: 11.592px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    letter-spacing: 0.773px;
+  }
+ }
+
+`;
+
+export const Users = styled.div`
+  border-radius: 20px;
+  background: #F5F7F7;
+  padding: 20px;
+  width: 100%;
+
+  .top{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+
+    h4{
+      color: var(--neutral-70, #636666);
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 40px; /* 285.714% */
+      letter-spacing: 0.28px;
+    }
+    p{
+      color: var(--secondary-color-main, #00C2C2);
+      font-family: Nunito;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+  }
+
+  .table{
+    display: flex;
+    flex-direction: column;
+
+    .user{
+      display: flex;
+      /* align-items: center; */
+      margin-top: 10px;
+      justify-content: space-between;
+      img{
+        margin-right: 10px;
+      }
+
+      .text{
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: start;
+        margin-right: 10px;
+       
+
+        h3{
+        color: var(--neutral-90, #313333);
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        letter-spacing: 0.28px;
+      }
+
+      P{
+        color: var(--neutral-90, #313333);
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0.24px;
+      }
+      }
+
+      
+    }
+  }
+
+`;
+
+export const UploadProgressContainer = styled.div`
+  border-radius: 30px;
+  background: var(--white, #FFF);
+  padding: 10px;
+  width: 100%;
+  margin-bottom: 20px;
+  .upload_icon{
+    margin-bottom: 10px;
+    p{
+      color: var(--neutral-70, #636666);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: 40px; /* 250% */
+      letter-spacing: 0.32px;
+    }
+
+    img{
+      width: 69px;
+      height: 53px; 
+    }
+  }
+  
+  .progress{
+
+    .text{
+      display: flex;
+      justify-content: space-between;
+
+      h5{
+        color: var(--neutral-70, #636666);
+        font-family: Nunito;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 40px; /* 333.333% */
+        letter-spacing: 0.24px;
+      }
+      p{
+        color: var(--neutral-70, #636666);
+        font-family: Nunito;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 40px; /* 333.333% */
+        letter-spacing: 0.24px;
+      }
+    }
+  }
+
+`

package/src/components/fileRightBar/upgrade.jsx

@@ -0,0 +1,121 @@
+import React from "react";
+import {
+  AbsoluteSVG,
+  ArrowIcon,
+  BannerCTA,
+  BannerImage,
+  BannerSubtitle,
+  BannerTitle,
+  BannerWrapper,
+  Container,
+  Upgrade,
+  Users,
+  UploadProgressContainer
+} from "./styles";
+import BannerImg from "./assets/banner.png";
+import Button from "../button";
+import { FaArrowRight } from "react-icons/fa";
+import CircularProgressBar from "./components/progressBar";
+import UpgradeIcon from "./assets/Feature.png";
+import UploadOwner from "./assets/uploadOwner.png";
+import { UploadProgress } from "./assets/uploadProgressIcon";
+import ProgressBar from "../progressBar";
+import UsersList from "./components/users";
+import UpgradeComponent from "./components/ugradeLock";
+
+
+const users = [
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+]
+
+const FileRightBar = () => {
+
+  return (
+    <Container>   
+    <BannerWrapper>
+      <div className="head">
+        <h3>Storage</h3>
+        <p>(50% Used)</p>
+      </div>
+      <CircularProgressBar value={2.5} total={5} />
+      <Button
+        type="primary"
+        text="Upgrade Storage"
+        styles={{
+          marginTop: "29px",
+          fontSize: "16px",
+          width: "200px",
+          gap: "8px",
+          padding: "15.457px 30.913px",
+          height: "38.641px",
+        }}
+      />
+    </BannerWrapper>
+    <UpgradeComponent />
+    <UsersList />
+
+    <UploadProgressContainer>
+      <div className="upload_icon">
+        <img src={UploadProgress?.image} alt="upload progress" />
+        <p>Uploading files</p>
+      </div>
+      <div className="progress">
+      <ProgressBar
+        value={50}
+        minValue={30}
+        maxValue={80}
+        size={"sm"}
+        color={"#30D468"}
+      />
+      <div className="text">
+        <div className="left">
+          <h5>2 of 6 Uploaded</h5>
+        </div>
+        <div className="right">
+          <p>3min 22sec</p>
+        </div>
+
+      </div>
+
+      </div>
+
+      <Button
+        type="primary"
+        text="Cancel Upload"
+        styles={{
+          marginTop: "10px",
+          fontSize: "14px",
+          width: "206px",
+          gap: "13px",
+          padding: "7px 26px",
+          height: "38.641px",
+          background: "#F39B33",
+        }}
+      />
+     
+    </UploadProgressContainer>
+    
+    </Container>
+  );
+};
+
+export default FileRightBar;

package/src/components/fileRightBar/uploadRight.jsx

@@ -0,0 +1,66 @@
+import React from "react";
+import {
+  AbsoluteSVG,
+  ArrowIcon,
+  BannerCTA,
+  BannerImage,
+  BannerSubtitle,
+  BannerTitle,
+  BannerWrapper,
+  Container,
+  Upgrade,
+  Users,
+  UploadProgressContainer
+} from "./styles";
+import BannerImg from "./assets/banner.png";
+import Button from "../button";
+import { FaArrowRight } from "react-icons/fa";
+import CircularProgressBar from "./components/progressBar";
+import UpgradeIcon from "./assets/Feature.png";
+import UploadOwner from "./assets/uploadOwner.png";
+import { UploadProgress } from "./assets/uploadProgressIcon";
+import ProgressBar from "../progressBar";
+import UpgradeComponent from "./components/ugradeLock";
+
+
+const users = [
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+]
+
+const FileRightBar = () => {
+
+  return (
+    <Container >   
+    <BannerWrapper>
+      <div className="head">
+        <h3>Storage</h3>
+        <p>(50% Used)</p>
+      </div>
+      <CircularProgressBar value={2.5} total={5} />
+    </BannerWrapper>
+    <UpgradeComponent />
+    
+    </Container>
+  );
+};
+
+export default FileRightBar;

package/src/components/fileRightBar/users.jsx

@@ -0,0 +1,75 @@
+import React from "react";
+import {
+  AbsoluteSVG,
+  ArrowIcon,
+  BannerCTA,
+  BannerImage,
+  BannerSubtitle,
+  BannerTitle,
+  BannerWrapper,
+  Container,
+  Upgrade,
+  Users,
+  UploadProgressContainer
+} from "./styles";
+import BannerImg from "./assets/banner.png";
+import Button from "../button";
+import { FaArrowRight } from "react-icons/fa";
+import CircularProgressBar from "./components/progressBar";
+import UpgradeIcon from "./assets/Feature.png";
+import UploadOwner from "./assets/uploadOwner.png";
+import UsersList from "./components/users";
+
+
+const users = [
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+  {
+    name: "Patty McDermott",
+    size: "156MB",
+  },
+]
+
+const FileRightBar = () => {
+
+  return (
+    <Container className="user_banner">   
+    <BannerWrapper>
+      <div className="head">
+        <h3>Storage</h3>
+        <p>(50% Used)</p>
+      </div>
+      <CircularProgressBar value={2.5} total={5} />
+      <Button
+        type="primary"
+        text="Upgrade Storage"
+        styles={{
+          marginTop: "29px",
+          fontSize: "16px",
+          width: "200px",
+          gap: "8px",
+          padding: "15.457px 30.913px",
+          height: "38.641px",
+        }}
+      />
+    </BannerWrapper>
+    <UsersList />
+    </Container>
+  );
+};
+
+export default FileRightBar;