# Footer

<figure><img src="https://raw.githubusercontent.com/akkshayTandon/react-hartan/main/images/footer.png" alt=""><figcaption><p>Preview</p></figcaption></figure>

### Usage

> ```bash
> npm i react-hartan
> ```

```jsx
import { Footer } from "react-hartan"

function App() {

  return (
    <>
      <Footer></Footer>
    </>
  )
}

export default App
```

### Customization With Props

* `footerList`  -> Required to be sent by the user, accepts an **array of objects,** where each element is an object of the structure:

```javascript
{
    footerLinkHeading: "", 
    footerLinks: [
        {
            footerLinkName: "", 
            footerLinkSrc: "", 
        }
    ]
}

// footerLinks is an array of objects with above structure
```

{% hint style="info" %}
NOTE:  Keep the name of the keys same as above.
{% endhint %}

* `copyrightYear`  -> Accepts a string value, a year which is shown in the footer.
* `copyrightName`  -> Accepts a string value, a name to be shown in the footer.
* `id` -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.
* `userFooterStyle`  -> Custom styling prop for the full footer section.
* `userLinksStyle`  -> Custom styling prop for full links container.
* `userFooterLinksStyle`  -> Custom styling prop for each link container inside the full links container.
* `userLinksDataStyle`  -> Custom styling prop for link data container.
* `userCopyrightStyle`  -> Custom styling prop for the copyright container.

{% tabs %}
{% tab title="Default" %}

```jsx
import { Footer } from "react-hartan"

function App() {

  return (
    <>
      <Footer></Footer>
    </>
  )
}

export default App
```

{% endtab %}

{% tab title="With Custom Props" %}
{% code overflow="wrap" %}

```jsx
// App.css
.bg-red{
   padding: 2rem;
   background-color: red;
}

.bg-pink{
   background-color: pink;
}


// App.jsx
import { Footer } from "react-hartan"

const list = [
  {
    footerLinkHeading: "Support",
    footerLinks: [
      {
        footerLinkName: "Gomtinagar and Daliganj, Lucknow",
        footerLinkSrc: ""
      },
      {
        footerLinkName: "hartanlibrary@gmail.com",
        footerLinkSrc: "mailto:hartanlibrary@gmail.com"
      },
      {
        footerLinkName: "9999999999",
        footerLinkSrc: ""
      },
      {
        footerLinkName: "9999999999",
        footerLinkSrc: ""
      }
    ]
  }
];

export default function App() {

  return (
    <>
      <Footer footerList={list} userFooterStyle={"bg-pink"} userFooterLinksStyle={"bg-red"}></Footer>
    </>
  )
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

### Component Code

This is the code for Footer component.

{% tabs %}
{% tab title="Footer.jsx" %}
{% code overflow="wrap" %}

```jsx
import footerStyles from "./Footer.module.css"
import PropTypes from "prop-types"


export const footerLinksArray = [
  {
    footerLinkHeading: "Follow Us",
    footerLinks: [
      {
        footerLinkName: "GitHub",
        footerLinkSrc: "https://github.com/akkshayTandon/react-hartan-js"
      },
      {
        footerLinkName: "LinkedIn",
        footerLinkSrc: ""
      },
      {
        footerLinkName: "Instagram",
        footerLinkSrc: ""
      },
      {
        footerLinkName: "YouTube",
        footerLinkSrc: ""
      }
    ]
  },
  {
    footerLinkHeading: "Support",
    footerLinks: [
      {
        footerLinkName: "Gomtinagar and Daliganj, Lucknow",
        footerLinkSrc: ""
      },
      {
        footerLinkName: "hartanlibrary@gmail.com",
        footerLinkSrc: "mailto:hartanlibrary@gmail.com"
      },
      {
        footerLinkName: "9999999999",
        footerLinkSrc: ""
      },
      {
        footerLinkName: "9999999999",
        footerLinkSrc: ""
      }
    ]
  }
];

export default function Footer({ footerList = footerLinksArray, copyrightYear = "2024", copyrightName = "Hartan Library", id, userFooterStyle, userLinksStyle, userFooterLinksStyle, userLinksDataStyle, userCopyrightStyle }) {

  return (
    <footer id="" className={`${userFooterStyle}`}>

      <div className={`${footerStyles.links} ${userLinksStyle}`}>
        {footerList.map((footerLink, id) => {
          return (
            <div className={`${userFooterLinksStyle}`} key={id}>
              <h2>
                {footerLink.footerLinkHeading}
              </h2>
              <div className={`${footerStyles.linksdata} ${userLinksDataStyle}`}>
                {footerLink.footerLinks.map((link, id) => {
                  return (
                    <li key={id}>
                      <a href={link.footerLinkSrc}>
                        {link.footerLinkName}
                      </a>
                    </li>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>

      <div className={`${footerStyles.copyright} ${userCopyrightStyle}`}>
        <p>
          Copyright © {copyrightYear} {copyrightName} — All rights reserved by
          <strong> {copyrightName} </strong>
        </p>
      </div>

    </footer>
  );
}

Footer.propTypes = {
  footerList: PropTypes.arrayOf(PropTypes.shape({
    footerLinkHeading: PropTypes.node,
    footerLinks: PropTypes.arrayOf(PropTypes.shape({
      footerLinkName: PropTypes.node,
      footerLinksrc: PropTypes.string
    }))
  })),
  copyrightYear: PropTypes.string,
  copyrightName: PropTypes.string,
  id: PropTypes.string,
  userFooterStyle: PropTypes.string,
  userLinksStyle: PropTypes.string,
  userFooterLinksStyle: PropTypes.string,
  userLinksDataStyle: PropTypes.string,
  userCopyrightStyle: PropTypes.string
};
```

{% endcode %}
{% endtab %}

{% tab title="Footer.module.css" %}
{% code overflow="wrap" %}

```css
/* Footer Style */

/* footer section */
footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background-color: #f5f5f5;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

/* Links container */
.links {
    display: flex;
    gap: 7rem;
}

.links div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.linksdata li {
    list-style: none;
    cursor: pointer;
    font-size: 1.24rem;
    text-decoration: none;
    color: black;
}

.linksdata li a {
    text-decoration: none;
    color: #000000;
}

/* copyright container */
.copyright {
    font-size: 1.4rem;
}
```

{% endcode %}
{% endtab %}
{% endtabs %}