master
mahdi 3 years ago
parent 7b51554355
commit 65fd1a4b16
  1. 14
      src/App.js
  2. 15
      src/components/Header/desgin1/HeaderDesign1.js
  3. 1
      tailwind.config.js

@ -22,13 +22,13 @@ function App() {
{/* <ButtonDesign /> */} {/* <ButtonDesign /> */}
{/* <ProductTags /> */} {/* <ProductTags /> */}
{/* <CounterDesign /> */} {/* <CounterDesign /> */}
<BlogDesign1 /> {/* <BlogDesign1 /> */}
<BlogDesign2 /> {/* <BlogDesign2 /> */}
<BlogDesign3 /> {/* <BlogDesign3 /> */}
<BlogDesign4 /> {/* <BlogDesign4 /> */}
<BlogDesign5 /> {/* <BlogDesign5 /> */}
<BlogDesign6 /> {/* <BlogDesign6 /> */}
{/* <HeaderDesign1 /> */} <HeaderDesign1 />
</div> </div>
); );
} }

@ -38,6 +38,8 @@ const HeaderDesign1 = ({
whiteIconCart, whiteIconCart,
whiteIconHamburgerMenu, whiteIconHamburgerMenu,
darkIconHamburgerMenu, darkIconHamburgerMenu,
headerDivider,
headerDividerColor,
}) => { }) => {
return ( return (
<header <header
@ -63,6 +65,9 @@ const HeaderDesign1 = ({
</div> </div>
</div> </div>
)} )}
{headerDivider && (
<div className="border-b border-lightGrayBorderColor mb-5"></div>
)}
<div className="flex justify-between items-center relative"> <div className="flex justify-between items-center relative">
<div className="ml-10"> <div className="ml-10">
<span className={`text-sm font-bold ml-4 ${siteNameTextColor}`}> <span className={`text-sm font-bold ml-4 ${siteNameTextColor}`}>
@ -113,7 +118,7 @@ const HeaderDesign1 = ({
<input <input
type="text" type="text"
placeholder="نام کالا را جستجو کنید..." placeholder="نام کالا را جستجو کنید..."
className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400" className="text-xs rounded-lg pr-4 pl-10 py-2 w-full border border-gray-400 font-light text-lightGrayTextColor placeholder-gray-400 focus:outline-none"
/> />
</div> </div>
</div> </div>
@ -152,6 +157,9 @@ const HeaderDesign1 = ({
</div> </div>
)} )}
</div> </div>
{headerDivider && (
<div className="border-b border-lightGrayBorderColor mt-5"></div>
)}
{bottomHeader && ( {bottomHeader && (
<div className="flex items-center mt-4 relative w-full "> <div className="flex items-center mt-4 relative w-full ">
<div className="ml-10 flex items-center"> <div className="ml-10 flex items-center">
@ -234,6 +242,9 @@ HeaderDesign1.defaultProps = {
btnPY: "py-2", btnPY: "py-2",
btnPX: "px-8", btnPX: "px-8",
headerDivider: true,
headerDividerColor: "border-lightGrayBorderColor",
topHeader: true, topHeader: true,
bottomHeader: true, bottomHeader: true,
@ -244,7 +255,7 @@ HeaderDesign1.defaultProps = {
// icons // icons
loginBtn: false, loginBtn: false,
whiteIconCart: true, whiteIconCart: false,
darkCrimsonIconCart: false, darkCrimsonIconCart: false,
whiteIconHamburgerMenu: false, whiteIconHamburgerMenu: false,

@ -60,6 +60,7 @@ module.exports = {
productDesignBorderColor: "#F3F3F3", productDesignBorderColor: "#F3F3F3",
lightBlueBorderColor: "#06BACE", lightBlueBorderColor: "#06BACE",
grayBorderColor: "#C3C3C3", grayBorderColor: "#C3C3C3",
lightGrayBorderColor: "#DBDBDB88",
lightOrangeBorderColor: "#F7B605", lightOrangeBorderColor: "#F7B605",
lightYellowBorderColor: "#CFFF2D", lightYellowBorderColor: "#CFFF2D",
lightGreenBorderColor: "#5DCE06", lightGreenBorderColor: "#5DCE06",

Loading…
Cancel
Save