parent
79d70d22fa
commit
9ae78b40d9
6 changed files with 96 additions and 0 deletions
After Width: | Height: | Size: 6.4 KiB |
After Width: | Height: | Size: 287 B |
After Width: | Height: | Size: 28 KiB |
@ -0,0 +1,51 @@ |
||||
import React from "react"; |
||||
import _ from "lodash"; |
||||
|
||||
import enamad from "./images/enamad-pic.svg"; |
||||
import samandehi from "images/samandehi-pic.svg"; |
||||
|
||||
import lightBlueLine from "images/light-blue-line.svg"; |
||||
|
||||
const FooterDesign1 = ({ links }) => { |
||||
return ( |
||||
<footer className="flex flex-col md:flex-row justify-around items-start md:items-start relative shadow-md bg-white"> |
||||
<div className="flex items-start"> |
||||
<> |
||||
{links.map((section, index) => ( |
||||
<ul className="mr-10" key={index}> |
||||
{section.map((link, index) => ( |
||||
<li |
||||
className={`font-light text-xs leading-7 hover:font-bold footer-items text-gray-600`} |
||||
key={index} |
||||
> |
||||
<a href="#">{link}</a> |
||||
</li> |
||||
))} |
||||
</ul> |
||||
))} |
||||
</> |
||||
</div> |
||||
<div className="flex items-center mt-10 md:mt-0"> |
||||
<img src={enamad} alt="enamad" className="w-28 ml-10" /> |
||||
<img src={samandehi} alt="samandehi" className="w-28" /> |
||||
</div> |
||||
{/* line */} |
||||
<img |
||||
src={lightBlueLine} |
||||
alt="" |
||||
className="hidden sm:block absolute bottom-5 left-20" |
||||
/> |
||||
</footer> |
||||
); |
||||
}; |
||||
|
||||
export default FooterDesign1; |
||||
|
||||
FooterDesign1.defaultProps = { |
||||
links: [ |
||||
["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"], |
||||
["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"], |
||||
["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"], |
||||
["لینک های اصلی", "فروشگاه", "درباره ما", "پرسش های متوالی"], |
||||
], |
||||
}; |
@ -0,0 +1,25 @@ |
||||
import React, { useState } from "react"; |
||||
|
||||
import Footer from "./Footer"; |
||||
|
||||
function FooterDesign() { |
||||
const list = { |
||||
1: <Footer />, |
||||
}; |
||||
const [type, setType] = useState(1); |
||||
return ( |
||||
<div className="w-full flex flex-col items-center"> |
||||
<select |
||||
className="mb-10 w-20 bg-gray-200" |
||||
onChange={(e) => setType(e.target.value)} |
||||
> |
||||
{Object.keys(list).map((option, index) => ( |
||||
<option key={index}>{option}</option> |
||||
))} |
||||
</select> |
||||
{list[type]} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default FooterDesign; |
Loading…
Reference in new issue