[React+Tailwind] Flowbite で Footer を表示してみる | 心を無にして始める React

2022-10-03

Contents

1. 準備
2. Footer コンポーネントをつくる
3. Footer コンポーネントをつかう
4. 結果

準備

Flowbite が使えるプロジェクトを準備します。

[React] Tailwind CSS を使ってみる@準備回 | 心を無にして始める React

TailWind CSS Rapidly build modern websites without ever leaving your HTML. Bootstrap とはまた違 ...

https://neko-note.org/react-tailwind-css-install/1047

[React] Flowbite を使ってみる@準備回 | 心を無にして始める React

Flowbite Tailwind CSS ベースのライブラリ。 Build websites even faster with components on top of ...

https://neko-note.org/react-flowbite-install/1058

Footer コンポーネントをつくる

./src/components 配下に Footer.js を作ります。

import { forwardRef } from 'react';
import { Footer as FlowbiteFooter } from 'flowbite-react';

const Footer = forwardRef((
  {
    bgDark = false,
    children,
    container = false,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteFooter
      bgDark={bgDark}
      container={container}
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteFooter>
  );
});

const FooterBrand = forwardRef((
  {
    alt,
    children,
    href,
    name,
    src,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteFooter.Brand
      alt={alt}
      href={href}
      name={name}
      ref={ref}
      src={src}
      {...otherProps}
    >
      {children}
    </FlowbiteFooter.Brand>
  );
});

const FooterCopyright = forwardRef((
  {
    by,
    children,
    href,
    year,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteFooter.Copyright
      by={by}
      href={href}
      ref={ref}
      year={year}
      {...otherProps}
    >
      {children}
    </FlowbiteFooter.Copyright>
  );
});

const FooterDivider = (
  {
    ...otherProps
  },
) => {
  return (
    <FlowbiteFooter.Divider
      {...otherProps}
    />
  );
};

const FooterIcon = forwardRef((
  {
    ariaLabel,
    children,
    href,
    icon,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteFooter.Icon
      ariaLabel={ariaLabel}
      href={href}
      icon={icon}
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteFooter.Icon>
  );
});

const FooterLink = forwardRef((
  {
    children,
    href,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteFooter.Link
      href={href}
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteFooter.Link>
  );
});

const FooterLinkGroup = forwardRef((
  {
    children,
    col = false,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteFooter.LinkGroup
      col={col}
      ref={ref}
      {...otherProps}
    >
      {children}
    </FlowbiteFooter.LinkGroup>
  );
});

const FooterTitle = forwardRef((
  {
    children,
    title,
    ...otherProps
  },
  ref,
) => {
  return (
    <FlowbiteFooter.Title
      ref={ref}
      title={title}
      {...otherProps}
    >
      {children}
    </FlowbiteFooter.Title>
  );
});

export default Object.assign(Footer, {
  Brand: FooterBrand,
  Copyright: FooterCopyright,
  Divider: FooterDivider,
  Icon: FooterIcon,
  Link: FooterLink,
  LinkGroup: FooterLinkGroup,
  Title: FooterTitle,
});

Footer コンポーネントをつかう

いつものように App.js を編集していきます。

import { CubeIcon } from '@heroicons/react/24/solid';

import Footer from './components/Footer';
import './App.css';

function App() {
  return (
    <div className="dark">
      
      <div className="min-h-screen p-8 gap-4 flex flex-col justify-center items-center dark:!bg-gray-900">
        <div className="w-full">
          <Footer container={true}>
            <Footer.Copyright
              href="https://neko-note.org"
              by="それなら猫の手で"
              year={2022}
            />
            <Footer.LinkGroup>
              <Footer.Link href="#">About</Footer.Link>
              <Footer.Link href="#">Privacy Policy</Footer.Link>
              <Footer.Link href="#">Licensing</Footer.Link>
              <Footer.Link href="#">Contact</Footer.Link>
            </Footer.LinkGroup>
          </Footer>
        </div>
        <div className="w-full">
          <Footer container={true}>
            <div className="w-full">
              <div className="grid w-full justify-between sm:flex sm:justify-between md:flex md:grid-cols-1">
                <div>
                  <Footer.Brand
                    href="https://neko-note.org"
                    name="それなら猫の手で"
                  />
                </div>
                <div className="grid grid-cols-2 gap-8 sm:mt-4 sm:grid-cols-3 sm:gap-6">
                  <div>
                    <Footer.Title title="about" />
                    <Footer.LinkGroup col={true}>
                      <Footer.Link href="#">Flowbite</Footer.Link>
                      <Footer.Link href="#">Tailwind CSS</Footer.Link>
                    </Footer.LinkGroup>
                  </div>
                  <div>
                    <Footer.Title title="Follow us" />
                    <Footer.LinkGroup col={true}>
                      <Footer.Link href="#">Github</Footer.Link>
                      <Footer.Link href="#">Discord</Footer.Link>
                    </Footer.LinkGroup>
                  </div>
                  <div>
                    <Footer.Title title="Legal" />
                    <Footer.LinkGroup col={true}>
                      <Footer.Link href="#">Privacy Policy</Footer.Link>
                      <Footer.Link href="#">Terms & Conditions</Footer.Link>
                    </Footer.LinkGroup>
                  </div>
                </div>
              </div>
              <Footer.Divider />
              <div className="w-full sm:flex sm:items-center sm:justify-between">
                <Footer.Copyright
                  href="https://neko-note.org"
                  by="それなら猫の手で"
                  year={2022}
                />
                <div className="mt-4 flex space-x-6 sm:mt-0 sm:justify-center">
                  <Footer.Icon href="#" icon={CubeIcon} />
                  <Footer.Icon href="#" icon={CubeIcon} />
                  <Footer.Icon href="#" icon={CubeIcon} />
                  <Footer.Icon href="#" icon={CubeIcon} />
                  <Footer.Icon href="#" icon={CubeIcon} />
                </div>
              </div>
            </div>
          </Footer>
        </div>
        <div className="w-full">
          <Footer bgDark={true}>
            <div className="w-full">
              <div className="grid w-full grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4">
                <div>
                  <Footer.Title title="Company" />
                  <Footer.LinkGroup col={true}>
                    <Footer.Link href="#">About</Footer.Link>
                    <Footer.Link href="#">Careers</Footer.Link>
                    <Footer.Link href="#">Brand Center</Footer.Link>
                    <Footer.Link href="#">Blog</Footer.Link>
                  </Footer.LinkGroup>
                </div>
                <div>
                  <Footer.Title title="help center" />
                  <Footer.LinkGroup col={true}>
                    <Footer.Link href="#">Discord Server</Footer.Link>
                    <Footer.Link href="#">Twitter</Footer.Link>
                    <Footer.Link href="#">Facebook</Footer.Link>
                    <Footer.Link href="#">Contact Us</Footer.Link>
                  </Footer.LinkGroup>
                </div>
                <div>
                  <Footer.Title title="legal" />
                  <Footer.LinkGroup col={true}>
                    <Footer.Link href="#">Privacy Policy</Footer.Link>
                    <Footer.Link href="#">Licensing</Footer.Link>
                    <Footer.Link href="#">Terms & Conditions</Footer.Link>
                  </Footer.LinkGroup>
                </div>
                <div>
                  <Footer.Title title="download" />
                  <Footer.LinkGroup col={true}>
                    <Footer.Link href="#">iOS</Footer.Link>
                    <Footer.Link href="#">Android</Footer.Link>
                    <Footer.Link href="#">Windows</Footer.Link>
                    <Footer.Link href="#">MacOS</Footer.Link>
                  </Footer.LinkGroup>
                </div>
              </div>
              <div className="w-full bg-gray-700 py-6 px-4 sm:flex sm:items-center sm:justify-between">
                <Footer.Copyright
                  href="https://neko-note.org"
                  by="それなら猫の手で"
                  year={2022}
                />
                <div className="mt-4 flex space-x-6 sm:mt-0 sm:justify-center">
                  <Footer.Icon href="#" icon={CubeIcon} />
                  <Footer.Icon href="#" icon={CubeIcon} />
                  <Footer.Icon href="#" icon={CubeIcon} />
                  <Footer.Icon href="#" icon={CubeIcon} />
                  <Footer.Icon href="#" icon={CubeIcon} />
                </div>
              </div>
            </div>
          </Footer>
        </div>
      </div>
    </div>
  );
}

export default App;

結果

はい、できました。

技術FlowbiteNode.jsReactTailwind CSS

Posted by 86