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 [email protected]

Link

Story Book Link Footer

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_footer

Import component

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

Usage

<Footer footerData={[{}]} />

Image

Sample Code

  <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 | ()=>{} | () => {} | - | | componentRootStyle | SxProps<{}> | { } | componentRootStyle : {} | | logoContainerStyle | SxProps<{}> | { } | logoContainerStyle : {} | | headingTitleColor | string | "#404E61" | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); | | headingTitleSize | number | 15 | | headingStyle | SxProps<{}> | { } | 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<{}> | { } | subTitleStyle : {} | | companyNameFontColor | string | "#98A0AC" | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); | | companyNameFontSize | number | 12 | | companyNameStyles | SxProps<{}> | { } | companyNameStyles : {} | | companyLogoBlockStyle | SxProps<{}> | { } | companyLogoBlockStyle : {} | | bottomTextColor | string | "#98A0AC" | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); | | bottomFontSize | number | 12 | | bottomTextBlockStyle | SxProps<{}> | { } | bottomTextBlockStyle : {} | | bottomTexStyle | SxProps<{}> | { } | bottomTexStyle : {} | | bottomPolicyTextColor | string | "#98A0AC" | linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); | | bottomPolicyFontSize | number | 12 | | reservedYearStyles | SxProps<{}> | { } | reservedYearStyles : {} | | hoverHeadingStyles | SxProps<{}> | { } | hoverHeadingStyles : {} | | subscriptionBlockStyle | SxProps<{}> | { } | 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?: () => void; }[]; termsOfPolicy?: { label?: string; onClick?: () => void; }[]; copyRight?: { label?: string; onClick?: () => void; }[]; } | object | {} | | className | string | - | Set string | | sx | SxProps<Theme> | - | Set object | | nestedHoverHeadingStyles | SxProps<{}> | - | Set object | | nestedHoverHeadingStyle | SxProps<{}> | - | Set object | | rootStyles | SxProps<{}> | { } | Set object | | nestedChild | { subValue?: string; icon?: ReactNode; iconDirection: "left" | "right"; styles?: SxProps<{}>; onClick?: () => void; link?: string; nested?: { heading?: { id?: number; title?: string; styles?: SxProps<...>; onClick?: () => void; }; subTitle?: { ...; }[]; }; } | {} | Set object |