# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hartans-organization.gitbook.io/hartan-docs/components/footer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.