npm package: @licuido-ui/ui_footer
Description: Footer component is an additional navigation used for displaying general information that a user might want to access from any page within your site.## Installation
Latest version: 0.0.2

# Footer

Footer component is an additional navigation used for displaying general information that a user might want to access from any page within your site.## Installation

### Author
 * @author Henry Dyson J <henry@crayond.co>
## Link
[Story Book Link Footer](http://216.48.182.148:3333/?path=/docs)

### PlayGround
[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i  @licuido-ui/ui_footer
```

## Import component

```jsx
import { Footer } from '@licuido-ui/ui_footer';
```

## Usage

```jsx
<Footer footerData={[{}]} />
```
## Image
![alt text](./footer.png)


## Sample Code
```jsx
  <Footer
    handleClickCompanyLogo={() => false}
    componentRootStyle={{}}
    logoContainerStyle={{}}
    headingTitleColor={"#404E61"}
    headingTitleSize={15}
    headingStyle={{}}
    nestedSubTitleIconAlign={"start"}
    nestedTitleIconAlign={"left"}
    nestedTitleTextAlign={"flex-end"}
    subTitleTextAlign={"flex-end"}
    subTitleIconAlign={"left"}
    headingTextAlign={"flex-end"}
    headingIconAlign={"left"}
    subTitleSize={16}
    subTitleColor={"#6E7882"}
    subTitleStyle={{}}
    companyNameFontColor={"#98A0AC"}
    companyNameFontSize={12}
    companyNameStyles={{}}
    companyLogoBlockStyle={{}}
    bottomTextColor={"#98A0AC"}
    bottomFontSize={12}
    bottomTextBlockStyle={{}}
    bottomTexStyle={{}}
    bottomPolicyTextColor={"#98A0AC"}
    bottomPolicyFontSize={12}
    reservedYearStyles={{}}
    hoverHeadingStyles={{}}
    subscriptionBlockStyle={{}}
    footerData={[
       {
      id: '1',
      order: 1,
      heading: {
        id: 1,
        title: 'Footer Step  ',
        icon: undefined,
        iconDirection: 'right',
        styles: {},
        onClick: () => false,
      },
      component: undefined,
      subTitle: [
        {
          id: '1',
          subValue: 'About us',
          icon: undefined,
          iconDirection: 'right',
          styles: {},
          onClick: () => false,
          link: '',
          nested: {
            heading: {
              id: 2,
              title: '',
              styles: {},
              onClick: () => false,
            },
            subTitle: [
              {
                id: '1',
                subValue: 'Home',
                icon: undefined,
                iconDirection: 'right',
                styles: {},
                onClick: () => false,
                link: 'https://cssbattle.dev/play/1',
              }
            ],
          },
        },
      ],
    },
    ]}
    footerLogo={[
       companyLogo: {
      label: 'companyName',
      logo: <LogoIcon />,
    },
     subscribes: [
      { icon: <PlayStore />, onClick: () => false },
     ]
     termsOfPolicy: [
      { label: 'Terms of Service', onClick: () => false },
      { label: 'Privacy Policy', onClick: () => false },
    ],
    copyRight: [
      { label: 'Crayond ©', onClick: () => false },
      { label: 'All s reserved', onClick: () => false },
      { label: 'creating Copy', onClick: () => false },
    ],
    ]}
/>
```
## Props

| **Name**                     | **Description**                                                                                                                                                                                                                                                                                             | **Default**   | **Control**                                        |
| ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------------------------------------------------- |
| **footerId**                 | string                                                                                                                                                                                                                                                                                                      | string        | string                                             |
| **handleClickCompanyLogo**   | \(\)=&gt;\{\}                                                                                                                                                                                                                                                                                               | \(\) =&gt; {} | \-                                                 |
| **componentRootStyle**       | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \{ \}         | componentRootStyle : \{\}                          |
| **logoContainerStyle**       | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \{ \}         | logoContainerStyle : \{\}                          |
| **headingTitleColor**        | string                                                                                                                                                                                                                                                                                                      | "\#404E61"    | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **headingTitleSize**         | number                                                                                                                                                                                                                                                                                                      | 15            |
| **headingStyle**             | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \{ \}         | headingStyle : \{\}                                |
| **nestedSubTitleIconAlign**  | "start" `or` "end"                                                                                                                                                                                                                                                                                          | "start"       | start                                              |
| **nestedTitleIconAlign**     | "left" `or` "right"                                                                                                                                                                                                                                                                                         | "left"        | right                                              |
| **nestedTitleTextAlign**     | "flex\-start" `or` "flex\-end" `or` "center"                                                                                                                                                                                                                                                                | "flex\-end"   |                                                    |
| **subTitleTextAlign**        | "flex\-start" `or` "flex\-end" `or` "center"                                                                                                                                                                                                                                                                | "flex\-end"   |                                                    |
| **subTitleIconAlign**        | "left" `or` "right"                                                                                                                                                                                                                                                                                         | "left"        | left                                               |
| **headingTextAlign**         | "flex\-start" `or` "flex\-end" `or` "center"                                                                                                                                                                                                                                                                | "flex\-end"   | center                                             |
| **headingIconAlign**         | "left" `or` "right"                                                                                                                                                                                                                                                                                         | "left"        | left                                               |
| **subTitleSize**             | number                                                                                                                                                                                                                                                                                                      | 16            |
| **subTitleColor**            | string                                                                                                                                                                                                                                                                                                      | "\#6E7882"    | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **subTitleStyle**            | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \{ \}         | subTitleStyle : \{\}                               |
| **companyNameFontColor**     | string                                                                                                                                                                                                                                                                                                      | "\#98A0AC"    | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **companyNameFontSize**      | number                                                                                                                                                                                                                                                                                                      | 12            |
| **companyNameStyles**        | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \{ \}         | companyNameStyles : \{\}                           |
| **companyLogoBlockStyle**    | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \{ \}         | companyLogoBlockStyle : \{\}                       |
| **bottomTextColor**          | string                                                                                                                                                                                                                                                                                                      | "\#98A0AC"    | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **bottomFontSize**           | number                                                                                                                                                                                                                                                                                                      | 12            |
| **bottomTextBlockStyle**     | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \{ \}         | bottomTextBlockStyle : \{\}                        |
| **bottomTexStyle**           | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \{ \}         | bottomTexStyle : \{\}                              |
| **bottomPolicyTextColor**    | string                                                                                                                                                                                                                                                                                                      | "\#98A0AC"    | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); |
| **bottomPolicyFontSize**     | number                                                                                                                                                                                                                                                                                                      | 12            |
| **reservedYearStyles**       | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \{ \}         | reservedYearStyles : \{\}                          |
| **hoverHeadingStyles**       | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \{ \}         | hoverHeadingStyles : \{\}                          |
| **subscriptionBlockStyle**   | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \{ \}         | subscriptionBlockStyle : \{\}                      |
| **footerData**               | array\{ order: number; heading: \{ id: number; title: string; icon?: ReactNode; iconDirection: "left"}                                                                                                                                                                                                      | {}            | \[\]                                               | footerData : \[0 : \{\.\.\.\} 4 keys1 : \{\.\.\.\} 4 keys2 : \{\.\.\.\} 4 keys3 : \{\.\.\.\} 4 keys\] |
| **footerLogo**               | array\{ companyLogo?: \{ label?: string; logo?: ReactNode; \}; subscribes?: \{ icon?: ReactNode; onClick?: \(\) =&gt; void; \}\[\]; termsOfPolicy?: \{ label?: string; onClick?: \(\) =&gt; void; \}\[\]; copyRight?: \{ label?: string; onClick?: \(\) =&gt; void; \}\[\]; \}                              | object        | {}                                                 |
| **className**                | string                                                                                                                                                                                                                                                                                                      | \-            | Set string                                         |
| **sx**                       | SxProps&lt;Theme&gt;                                                                                                                                                                                                                                                                                        | \-            | Set object                                         |
| **nestedHoverHeadingStyles** | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \-            | Set object                                         |
| **nestedHoverHeadingStyle**  | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \-            | Set object                                         |
| **rootStyles**               | SxProps&lt;\{\}&gt;                                                                                                                                                                                                                                                                                         | \{ \}         | Set object                                         |
| **nestedChild**              | \{ subValue?: string; icon?: ReactNode; iconDirection: "left" \| "right"; styles?: SxProps&lt;\{\}&gt;; onClick?: \(\) =&gt; void; link?: string; nested?: \{ heading?: \{ id?: number; title?: string; styles?: SxProps&lt;\.\.\.&gt;; onClick?: \(\) =&gt; void; \}; subTitle?: \{ \.\.\.; \}\[\]; \}; \} | {}            | Set object                                         |