Pedram Keshavarzi 3 years ago
commit 50fe4e5905
  1. 5
      src/Views/Home/Main/index.js
  2. 2
      src/Views/Home/Sidebar/index.js
  3. 7
      src/components/Navbar/dark-crimson-cart-icon.svg
  4. 10
      src/components/Navbar/dark-crimson-hamburger-menu.svg
  5. 8
      src/components/Navbar/dark-crimson-profile-icon.svg
  6. 5
      src/components/Navbar/dark-crimson-search-box.svg
  7. 143
      src/components/Navbar/index.js
  8. 7
      src/components/Navbar/light-gray-search-box.svg
  9. 7
      src/components/Navbar/white-cart-icon.svg
  10. 9
      src/components/Navbar/white-hamburger-menu-icon.svg
  11. 2
      src/components/SidebarCategoryHover/list.js
  12. 36
      src/redux/data.js

@ -7,9 +7,12 @@ function Main({ activeComponent }) {
<div className="lg:flex lg:flex-col lg:w-5/6 lg:h-full border-r border-gray-200">
<header className="w-full flex flex-row items-center h-16 px-1 py-4 bg-gray-700"></header>
<section className="w-full lg:overflow-y-scroll py-5 px-10 flex-1 flex-col">
<h1 className="font-bold text-3xl mb-10 text-left">
<h1 className="font-bold text-3xl text-left">
{activeComponent?.content?.name}
</h1>
<span className="font-bold text-xs mb-10 text-left block">
{activeComponent?.name && `Designed by: ${activeComponent?.author}`}
</span>
{activeComponent?.content?.component}
{activeComponent?.content?.code && (
<Code code={activeComponent?.content?.code} />

@ -12,7 +12,7 @@ function Sidebar({ list, setActive }) {
className="w-full"
/>
</header>
<ul className="w-full flex-1 p-0 m-0 list-none divided divide-y max-h-full lg:overflow-y-scroll divide-blue-100 border-r border-gray-200">
<ul className="w-full flex-1 p-0 m-0 list-none divided divide-y max-h-full overflow-y-scroll divide-blue-100 border-r border-gray-200">
{list.map((material, index) => (
<li
key={index}

@ -0,0 +1,7 @@
<svg id="bag-2" xmlns="http://www.w3.org/2000/svg" width="72.645" height="72.645" viewBox="0 0 72.645 72.645">
<path id="Vector" d="M0,17.137V14.2C0,7.391,5.479.7,12.289.066a13.622,13.622,0,0,1,14.953,13.56V17.8" transform="translate(22.702 6.079)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M17.407,42.376H35.568c12.168,0,14.347-4.873,14.983-10.806l2.27-18.161C53.639,6.023,51.52,0,38.6,0H14.38C1.455,0-.663,6.023.154,13.409L2.424,31.57C3.06,37.5,5.239,42.376,17.407,42.376Z" transform="translate(9.835 24.215)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.522" transform="translate(46.408 35.822)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.522" transform="translate(25.217 35.822)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H72.645V72.645H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="42.098" height="52.867" viewBox="0 0 42.098 52.867">
<g id="vuesax_linear_textalign-justifycenter" data-name="vuesax/linear/textalign-justifycenter" transform="translate(-364 -188)">
<g id="textalign-justifycenter" transform="translate(364 188)">
<path id="Vector" d="M0,0H28.881" transform="translate(6.608 9.913)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 20.926)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 31.94)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M0,0H42.1V52.867H0Z" transform="translate(42.098 52.867) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1020 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72.826" height="72.826" viewBox="0 0 72.826 72.826">
<g id="profile-circle" transform="translate(0 0)">
<path id="Vector" d="M10.317,19.875a2.922,2.922,0,0,0-.728,0,9.953,9.953,0,1,1,.728,0Z" transform="translate(26.46 18.904)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M40.9,11.971a30.145,30.145,0,0,1-20.452,7.95A30.145,30.145,0,0,1,0,11.971C.3,9.118,2.124,6.327,5.371,4.142c8.314-5.523,21.909-5.523,30.162,0C38.78,6.327,40.6,9.118,40.9,11.971Z" transform="translate(15.961 46.836)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M60.688,30.344A30.344,30.344,0,1,1,30.344,0,30.344,30.344,0,0,1,60.688,30.344Z" transform="translate(6.069 6.069)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M0,0H72.826V72.826H0Z" transform="translate(72.826 72.826) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,5 @@
<svg id="search-normal" xmlns="http://www.w3.org/2000/svg" width="72.645" height="72.645" viewBox="0 0 72.645 72.645">
<path id="Vector" d="M57.511,28.755A28.755,28.755,0,1,1,28.755,0,28.755,28.755,0,0,1,57.511,28.755Z" transform="translate(6.054 6.054)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M6.054,6.054,0,0" transform="translate(60.538 60.537)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H72.645V72.645H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 646 B

@ -0,0 +1,143 @@
import React from "react";
import Search from "../Search";
import cartIcon from "./dark-crimson-cart-icon.svg";
import whiteCartIcon from "./white-cart-icon.svg";
import profileIcon from "./dark-crimson-profile-icon.svg";
import searchIcon from "./dark-crimson-search-box.svg";
import lightGraySearchIcon from "./light-gray-search-box.svg";
import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg";
import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg";
const HeaderDesign1 = ({
loginBtn,
menuItems,
category,
searchBox,
topHeader,
bottomHeader,
productCategoryTextColor,
menuItemsColor,
}) => {
return (
<header className={`rounded-b-md w-full bg-transparent`}>
<>
{topHeader && (
<div className="flex justify-between items-center mb-2">
<div
className="divide-x flex flex-row-reverse transform translate-x-2"
style={{}}
>
<span className={`text-xs font-light px-2 text-gray-500`}>
انتخاب کشور
</span>
<span className={`text-xs font-light px-2text-gray-500`}>
پیگیری سفارش
</span>
</div>
<div className="">
<span className={`text-xs font-light ml-2text-gray-500`}>
شکایات&nbsp;
</span>
<span className={`text-xs font-lighttext-gray-500`}>
ورود و ثبت نام
</span>
</div>
</div>
)}
<div className="border-b border-lightGrayBorderColor mb-5"></div>
</>
<div className="flex justify-between items-center relative">
<div className="ml-10">
<span className={`text-sm font-bold ml-4 text-gray-700`}>
Design System
</span>
{category && (
<span className={`text-sm font-bold ${productCategoryTextColor}`}>
دسته بندی ها
</span>
)}
</div>
<div
className="hidden lg:flex items-center w-3/5 justify-around flex-1 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: 700 }}
>
{menuItems?.map((item, index) => (
<a href="#" className="text-productPrice text-xs" key={index}>
{item}
</a>
))}
</div>
{searchBox && (
<div
className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: 700 }}
>
<Search />
</div>
)}
{loginBtn && (
<div className="flex justify-end mr-7">
<button className={`ml-2 text-xs font-light`}>ورود</button>
{/* <img src={verticalLineIcon} alt="" className="" /> */}
<button className={`ml-2 text-xs font-light`}>ثبت نام</button>
</div>
)}
<div className="w-1/5 flex justify-end items-center ">
<img src={cartIcon} alt="" className="w-5 h-5 ml-2" />
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
<img src={searchIcon} alt="" className="w-5 h-5 ml-2" />
<img src={profileIcon} alt="" className="w-5 h-5" />
</div>
</div>
{bottomHeader && (
<>
<div className="border-b border-lightGrayBorderColor mt-5"></div>
<div className="flex items-center mt-4 relative w-full ">
<div className="ml-10 flex items-center">
<img src={darkCrimsonHamburgerMenu} alt="" className="w-5 h-5" />
<img src={whiteHamburgerMenu} alt="" className="w-3 h-3" />
<span className={`text-xs mr-2 ${productCategoryTextColor}`}>
دسته بندی کالاها
</span>
</div>
<div
className="hidden lg:flex items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: 700 }}
>
{menuItems.map((item, index) => (
<a href="#" className={`text-xs ${menuItemsColor}`} key={index}>
{item}
</a>
))}
</div>
</div>
</>
)}
</header>
);
};
export default HeaderDesign1;
HeaderDesign1.defaultProps = {
productCategoryTextColor: "text-productPrice",
menuItemsColor: "text-productPrice",
border: "border",
topHeader: true,
bottomHeader: true,
menuItems: [
"محصولات",
"دسته بندی",
"تماس با ما",
"درباره ما",
"پیگیری",
"وبلاگ",
],
category: true,
searchBox: true,
// icons
loginBtn: true,
};

@ -0,0 +1,7 @@
<svg id="vuesax_linear_search-normal" data-name="vuesax/linear/search-normal" xmlns="http://www.w3.org/2000/svg" width="38.895" height="38.895" viewBox="0 0 38.895 38.895">
<g id="search-normal">
<path id="Vector" d="M30.792,15.4A15.4,15.4,0,1,1,15.4,0,15.4,15.4,0,0,1,30.792,15.4Z" transform="translate(3.241 3.241)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M3.241,3.241,0,0" transform="translate(32.412 32.412)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H38.895V38.895H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 728 B

@ -0,0 +1,7 @@
<svg id="bag-2" xmlns="http://www.w3.org/2000/svg" width="72.645" height="72.645" viewBox="0 0 72.645 72.645">
<path id="Vector" d="M0,17.137V14.2C0,7.391,5.479.7,12.289.066a13.622,13.622,0,0,1,14.953,13.56V17.8" transform="translate(22.702 6.079)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M17.407,42.376H35.568c12.168,0,14.347-4.873,14.983-10.806l2.27-18.161C53.639,6.023,51.52,0,38.6,0H14.38C1.455,0-.663,6.023.154,13.409L2.424,31.57C3.06,37.5,5.239,42.376,17.407,42.376Z" transform="translate(9.835 24.215)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.522" transform="translate(46.408 35.822)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.522" transform="translate(25.217 35.822)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H72.645V72.645H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="31.881" height="25.028" viewBox="0 0 31.881 25.028">
<g id="vuesax_linear_textalign-justifycenter" data-name="vuesax/linear/textalign-justifycenter" transform="translate(-369.108 -201.5)">
<g id="textalign-justifycenter" transform="translate(364 193.088)">
<path id="Vector" d="M0,0H28.881" transform="translate(6.608 9.913)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 20.926)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 31.94)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 877 B

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import _, { set } from "lodash";
import Col from "./Col";
import Col from "./col";
export default function List({ activeItem, item, setActiveItem, colLength }) {
const [cols, setCols] = useState(null);

@ -20,11 +20,12 @@ import Chart from "../components/Recharts";
import CircularProgressbar from "../components/CircularProgressbar";
import Stepper from "../components/Stepper";
import Product from "../components/Product";
import Navbar from "../components/Navbar";
import Calender from '../components/Calender';
const components = [
{
name : "Button",
author : 'Andalib',
props : [
],
@ -36,6 +37,7 @@ const components = [
},
{
name : "Tag",
author : 'Andalib',
props : [
],
@ -47,6 +49,7 @@ const components = [
},
{
name: "Input",
author : "Ashrafi",
props: [
{
name: "maxLength",
@ -255,6 +258,7 @@ const components = [
},
{
name: "Search",
author: "Ashrafi",
props: [],
content: {
name: "Search",
@ -264,6 +268,7 @@ const components = [
},
{
name: "Search with suggestion",
author : "Ashrafi",
props: [],
content: {
name: "Search with suggestion",
@ -273,6 +278,7 @@ const components = [
},
{
name : "Radio",
author : "Ashrafi",
props : [
],
@ -284,6 +290,7 @@ const components = [
},
{
name : "Checkbox",
author: "Ashrafi",
props : [
],
@ -295,6 +302,7 @@ const components = [
},
{
name : "Select box - Radio",
author: "Ashrafi",
props : [
],
@ -306,6 +314,7 @@ const components = [
},
{
name : "Select box - Checkbox",
author: "Ashrafi",
props : [
],
@ -317,6 +326,7 @@ const components = [
},
{
name : "Switch",
author: "Ashrafi",
props : [
],
@ -328,6 +338,7 @@ const components = [
},
{
name : "Expandable products filter",
author: "Ashrafi",
props : [
],
@ -339,6 +350,7 @@ const components = [
},
{
name : "Sidebar catergory",
author: "Ashrafi",
props : [
],
@ -350,6 +362,7 @@ const components = [
},
{
name : "Slider",
author: "Ashrafi",
props : [
],
@ -361,6 +374,7 @@ const components = [
},
{
name : "Range",
author: "Ashrafi",
props : [
],
@ -372,6 +386,7 @@ const components = [
},
{
name : "Counter",
author: "Andalib",
props : [
],
@ -383,6 +398,7 @@ const components = [
},
{
name : "Alert",
author: "Andalib",
props : [
],
@ -394,6 +410,7 @@ const components = [
},
{
name : "Toast",
author: "Andalib",
props : [
],
@ -405,6 +422,7 @@ const components = [
},
{
name : "Star rating",
author: "Ashrafi",
props : [
],
@ -416,6 +434,7 @@ const components = [
},
{
name : "Chart",
author: "Ashrafi",
props : [
],
@ -427,6 +446,7 @@ const components = [
},
{
name : "Circular progressbar",
author: "Ashrafi",
props : [
],
@ -438,6 +458,7 @@ const components = [
},
{
name : "Stepper",
author: "Ashrafi",
props : [
],
@ -449,6 +470,7 @@ const components = [
},
{
name : "Product",
author: "Andalib",
props : [
],
@ -469,6 +491,18 @@ const components = [
code : null,
}
},
{
name : "Navbar",
author: "Andalib",
props : [
],
content : {
name : "Navbar",
component : <Navbar />,
code : null,
}
},
];
export default components;

Loading…
Cancel
Save