LoginSignup
3
0

More than 1 year has passed since last update.

@s14101500383at(さん ごり)

Chakra-ui 公式Docの検索バーを作る

Posted at

題名の通り、Chakra-uiの公ドキュメントの検索バーを作ります。

chakra-ui
react-icons

　環境{
Next.js:"12.2.3"
React: "18.2.0"
Typescript: "4.7.4"
chakra-ui/react: "^2.2.4"
chakra-ui/icons: "^2.0.4"
react-icons: "^4.4.0"
vscode
Mac
}

上記をインストールしといてください。
詳しくはこちらをご覧ください。

作るもののイメージ

これとーーー
スクリーンショット 2022-08-02 18.57.53.png
オーバーレイで背景が暗くなります。これです！
スクリーンショット 2022-08-02 18.59.06.png

ヘッダー

ディレクトリ構成は以下の通りです。
src/components/SumpleHeader

SumpleHeaderコンポーネントを作り以下のよう記述してください。

// src/components/SumpleHeader

import { Box,Button,Flex,HStack,Icon,Kbd,Select,} 
from "@chakraui/react";
import { SiChakraui } from "react-icons/si";
import {AiFillHeart,AiFillYoutube,AiOutlineGithub,AiOutlineSearch,} 
from "react-icons/ai";
import { FaDiscord, FaMoon } from "react-icons/fa";

export const SumpleHeader = () => {
  return (
    <Flex>
      <Box>
        <HStack>

         <Flex>
          <Icon as={SiChakraui} />
          <Flex>chakra</Flex>
         </Flex>

          <Flex>
            <Button>
              <Flex>
                <HStack >
                  <Flex>
                    <Icon as={AiOutlineSearch} />
                    <Box>Search the docs</Box>
                  </Flex>
                  <Flex>
                    <span>
                      <Kbd>⌘</Kbd><Kbd>K</Kbd>
                    </span>
                  </Flex>
                </HStack>
              </Flex>
            </Button>
          </Flex>

          <Flex>

              <Select>
                <option>v2.2.3</option>
                <option>v1.8.8</option>
                <option>v0.8.x</option>
              </Select>

              <Icon as={AiOutlineGithub} />
              <Icon as={FaDiscord} />
              <Icon as={AiFillYoutube} />
              <Icon as={FaMoon} />
          </Flex>
        
          <Flex>
            <Button>
              <Icon as={AiFillHeart} /> Sponsor
            </Button>
          </Flex>

        </HStack>
      </Box>
    </Flex>
  );
};

そしたら、src/pages/配下のindexコンポーネントにSumpleHeaderをインポートします。

// src/components/index
import type { NextPage } from "next";
import { SumpleHeader } from "../componets/SumpleHeader";

const Home: NextPage = () => {
  return (
    <>
      <SumpleHeader />
    </>
  );
};

export default Home;

下の様になります。いい感じです!　楽しくなってきました！
次にスタイルを充てます。
スクリーンショット 2022-08-02 21.19.25.png

SumpleHeaderコンポーネントを以下のように書き換えてください。

// src/components/SumpleHeader

import {Box,Button,Flex,HStack,Icon,Input,Kbd,Select,} 
from "@chakra-ui/react";
import { SiChakraui } from "react-icons/si";
import {AiFillHeart,AiFillYoutube,AiOutlineGithub,AiOutlineSearch,}
from "react-icons/ai";
import { FaDiscord, FaMoon } from "react-icons/fa";

export const SumpleHeader = () => {
  return (
    <Flex justify="center" mt="100px">
      <Box>
        <HStack>
          <Flex align="center" pr="100px">
            <Icon as={SiChakraui} fontSize="43px" color="teal.300" pr="10px" />
            <Flex fontWeight="600" fontSize="30px">
              chakra
            </Flex>
          </Flex>

          <Button
            bgColor="white"
            boxShadow=" 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);"
            transform="translate(1px)"
          >
            <Flex>
              <HStack>
                <Flex align="center">
                  <Icon as={AiOutlineSearch} fontSize="30px" pr="10px" />
                  <Box pr="450px" fontWeight="300" color="gray.700">
                    Search the docs
                  </Box>
                </Flex>
                <Flex align="center" color="gray.700">
                  <span>
                    <Kbd mr="3px">⌘</Kbd>
                    <Kbd>K</Kbd>
                  </span>
                </Flex>
              </HStack>
            </Flex>
          </Button>

          <Flex align="center" pl="5px" color="gray.400">
            <Select
              fontWeight="700"
              color="gray.600"
              border="none"
              outline="none"
            >
              <option>v2.2.3</option>
              <option>v1.8.8</option>
              <option>v0.8.x</option>
            </Select>
            <HStack spacing="20px">
              <Icon as={AiOutlineGithub} fontSize="2xl" />
              <Icon as={FaDiscord} fontSize="xl" />
              <Icon as={AiFillYoutube} fontSize="xl" />
              <Icon as={FaMoon} fontSize="xl" />
            </HStack>
          </Flex>

          <Flex pl="20px" align="center">
            <Button
              bgColor="gray.50"
              boxShadow=" 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);"
              w="110px"
            >
              <Icon as={AiFillHeart} color="red.500" fontSize="xl" mr="5px" />
              Sponsor
            </Button>
          </Flex>
        </HStack>
      </Box>
    </Flex>
  );
};

すると、こうなります！
スクリーンショット 2022-08-02 22.52.32.png
下は公式
スクリーンショット 2022-08-02 18.57.53.png

検索バー

下のように検索バーをクリックするとオーバーレイされます。これを作ります。
スクリーンショット 2022-08-02 18.59.06.png

SumpleHeaderの以下の部分をそのまんまコピーしてから削除してください。


// /src/components/SumpleHeader

          <Button
            bgColor="white"
            boxShadow=" 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);"
            transform="translate(1px)"
          >
            <Flex>
              <HStack>
                <Flex align="center">
                  <Icon as={AiOutlineSearch} fontSize="30px" pr="10px" />
                  <Box pr="450px" fontWeight="300" color="gray.700">
                    Search the docs
                  </Box>
                </Flex>
                <Flex align="center" color="gray.700">
                  <span>
                    <Kbd mr="3px">⌘</Kbd>
                    <Kbd>K</Kbd>
                  </span>
                </Flex>
              </HStack>
            </Flex>
          </Button>

そしたら、src/components/配下に新しくSearchBtnコンポーネントを作成し、コピーした記述を貼り付けます。

// src/components/SearchBtn

import { Box, Button, Flex, HStack, Icon, Kbd } from "@chakra-ui/react";
import { AiOutlineSearch } from "react-icons/ai";

export const SearchBtn = () => {
  return (
    <>
      <Button
        bgColor="white"
        boxShadow=" 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);"
        transform="translate(1px)"
      >
        <Flex>
          <HStack>
            <Flex align="center">
              <Icon as={AiOutlineSearch} fontSize="30px" pr="10px" />
              <Box pr="450px" fontWeight="300" color="gray.700">
                Search the docs
              </Box>
            </Flex>
            <Flex align="center" color="gray.700">
              <span>
                <Kbd mr="3px">⌘</Kbd>
                <Kbd>K</Kbd>
              </span>
            </Flex>
          </HStack>
        </Flex>
      </Button>
    </>
  );
};

そしたら、SearchBtnコンポーネントをSumpleHeaderコンポーネントからButtonを削除した位置にインポートします。

// src/components/SumpleHeader

//省略
 <Flex fontWeight="600" fontSize="30px">
              chakra
            </Flex>
          </Flex>
           
            //ここにインポート
          <SearchBtn />

          <Flex align="center" pl="5px" color="gray.400">
            <Select
              fontWeight="700"
//省略

これでコンポーネント分割前と同じなったはずです。
次で最後の工程です。
SearchBtnコンポーネントを以下のように書き換えてください。

// src/components/SearchBtn

import {AlertDialog,AlertDialogContent,AlertDialogOverlay,
       Box,Button,Flex,HStack,Icon,Input,Kbd,useDisclosure,} 
from "@chakra-ui/react";
import React from "react";
import { AiOutlineSearch } from "react-icons/ai";

export const SearchBtn = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const cancelRef = React.useRef<HTMLButtonElement>(null);
  return (
    <>
      <Button
        bgColor="white"
        boxShadow=" 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);"
        transform="translate(1px)"
        onClick={onOpen}
      >
        <Flex>
          <HStack>
            <Flex align="center">
              <Icon as={AiOutlineSearch} fontSize="30px" pr="10px" />
              <Box pr="450px" fontWeight="300" color="gray.700">
                Search the docs
              </Box>
            </Flex>
            <Flex align="center" color="gray.700">
              <span>
                <Kbd mr="3px">⌘</Kbd>
                <Kbd>K</Kbd>
              </span>
            </Flex>
          </HStack>
        </Flex>
      </Button>

      <AlertDialog
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onClose={onClose}
      >
        <AlertDialogOverlay>
          <AlertDialogContent mt="150px" w="550px" h="65px">
            <Flex justify="center">
              <HStack bgColor="white" borderRadius="10px">
                <Icon
                  as={AiOutlineSearch}
                  fontSize="27px"
                  color="teal.500"
                  ml="8px"
                  w="50px"
                />
                <Input
                  border="none"
                  outline="transparent solid 2px"
                  placeholder="Search the docs"
                  w="550px"
                  h="65px"
                />
              </HStack>
            </Flex>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
    </>
  );
};

いかがでしょうか！
上が作った方
下が公式です。
スクリーンショット 2022-08-03 12.06.38.png
お疲れ様でした！

全体のコード

// src/components/SumpleHeader

import { Box, Button, Flex, HStack, Icon, Select } from "@chakra-ui/react";
import { SiChakraui } from "react-icons/si";
import { AiFillHeart, AiFillYoutube, AiOutlineGithub } from "react-icons/ai";
import { FaDiscord, FaMoon } from "react-icons/fa";
import { SearchBtn } from "./SearchBtn";

export const SumpleHeader = () => {
  return (
    <Flex justify="center" mt="100px">
      <Box>
        <HStack>
          <Flex align="center" pr="100px">
            <Icon as={SiChakraui} fontSize="43px" color="teal.300" pr="10px" />
            <Flex fontWeight="600" fontSize="30px">
              chakra
            </Flex>
          </Flex>

          <SearchBtn />

          <Flex align="center" pl="5px" color="gray.400">
            <Select
              fontWeight="700"
              color="gray.600"
              border="none"
              outline="none"
            >
              <option>v2.2.3</option>
              <option>v1.8.8</option>
              <option>v0.8.x</option>
            </Select>
            <HStack spacing="20px">
              <Icon as={AiOutlineGithub} fontSize="2xl" />
              <Icon as={FaDiscord} fontSize="xl" />
              <Icon as={AiFillYoutube} fontSize="xl" />
              <Icon as={FaMoon} fontSize="xl" />
            </HStack>
          </Flex>

          <Flex pl="20px" align="center">
            <Button
              bgColor="gray.50"
              boxShadow=" 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);"
              w="110px"
            >
              <Icon as={AiFillHeart} color="red.500" fontSize="xl" mr="5px" />
              Sponsor
            </Button>
          </Flex>
        </HStack>
      </Box>
    </Flex>
  );
};


// src/components/SearchBtn
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogOverlay,
  Box,
  Button,
  Flex,
  HStack,
  Icon,
  Input,
  Kbd,
  useDisclosure,
} from "@chakra-ui/react";
import React from "react";
import { AiOutlineSearch } from "react-icons/ai";

export const SearchBtn = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const cancelRef = React.useRef<HTMLButtonElement>(null);
  return (
    <>
      <Button
        bgColor="white"
        boxShadow=" 0 1px 3px 0 rgba(0, 0, 0, 0.1),0 1px 2px 0 rgba(0, 0, 0, 0.06);"
        transform="translate(1px)"
        onClick={onOpen}
      >
        <Flex>
          <HStack>
            <Flex align="center">
              <Icon as={AiOutlineSearch} fontSize="30px" pr="10px" />
              <Box pr="450px" fontWeight="300" color="gray.700">
                Search the docs
              </Box>
            </Flex>
            <Flex align="center" color="gray.700">
              <span>
                <Kbd mr="3px">⌘</Kbd>
                <Kbd>K</Kbd>
              </span>
            </Flex>
          </HStack>
        </Flex>
      </Button>

      <AlertDialog
        isOpen={isOpen}
        leastDestructiveRef={cancelRef}
        onClose={onClose}
      >
        <AlertDialogOverlay>
          <AlertDialogContent mt="150px" w="550px" h="65px">
            <Flex justify="center">
              <HStack bgColor="white" borderRadius="10px">
                <Icon
                  as={AiOutlineSearch}
                  fontSize="27px"
                  color="teal.500"
                  ml="8px"
                  w="50px"
                />
                <Input
                  border="none"
                  outline="transparent solid 2px"
                  placeholder="Search the docs"
                  w="550px"
                  h="65px"
                />
              </HStack>
            </Flex>
          </AlertDialogContent>
        </AlertDialogOverlay>
      </AlertDialog>
    </>
  );
};

後書き

ご覧いただきありがとうございます。
もっと丁寧にやれば見やすい記述だったり、不要な記述を減らせられると思いますが、目標は達したので良しとします。

個人的に創ってたもので検索バーの仕様をchakra-uiみたくしたくて書いてみました。

終わり

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
0