0.0.2 • Published 8 months ago

@licuido-ui/ui_footer v0.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

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

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

alt text

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

NameDescriptionDefaultControl
footerIdstringstringstring
handleClickCompanyLogo()=>{}() => {}-
componentRootStyleSxProps<{}>{ }componentRootStyle : {}
logoContainerStyleSxProps<{}>{ }logoContainerStyle : {}
headingTitleColorstring"#404E61"linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
headingTitleSizenumber15
headingStyleSxProps<{}>{ }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
subTitleSizenumber16
subTitleColorstring"#6E7882"linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
subTitleStyleSxProps<{}>{ }subTitleStyle : {}
companyNameFontColorstring"#98A0AC"linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
companyNameFontSizenumber12
companyNameStylesSxProps<{}>{ }companyNameStyles : {}
companyLogoBlockStyleSxProps<{}>{ }companyLogoBlockStyle : {}
bottomTextColorstring"#98A0AC"linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
bottomFontSizenumber12
bottomTextBlockStyleSxProps<{}>{ }bottomTextBlockStyle : {}
bottomTexStyleSxProps<{}>{ }bottomTexStyle : {}
bottomPolicyTextColorstring"#98A0AC"linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
bottomPolicyFontSizenumber12
reservedYearStylesSxProps<{}>{ }reservedYearStyles : {}
hoverHeadingStylesSxProps<{}>{ }hoverHeadingStyles : {}
subscriptionBlockStyleSxProps<{}>{ }subscriptionBlockStyle : {}
footerDataarray{ order: number; heading: { id: number; title: string; icon?: ReactNode; iconDirection: "left"}{}[]footerData : [0 : {...} 4 keys1 : {...} 4 keys2 : {...} 4 keys3 : {...} 4 keys]
footerLogoarray{ companyLogo?: { label?: string; logo?: ReactNode; }; subscribes?: { icon?: ReactNode; onClick?: () => void; }[]; termsOfPolicy?: { label?: string; onClick?: () => void; }[]; copyRight?: { label?: string; onClick?: () => void; }[]; }object{}
classNamestring-Set string
sxSxProps<Theme>-Set object
nestedHoverHeadingStylesSxProps<{}>-Set object
nestedHoverHeadingStyleSxProps<{}>-Set object
rootStylesSxProps<{}>{ }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
@emotion/react@emotion/styled@mui/materialreactreact-dom
@licuido-ui/react
0.0.2

8 months ago