Next.js App DirectoryとTremorでフッターメニュー

"use client";

import { HeartIcon, HomeIcon, SearchIcon } from "@heroicons/react/outline";
import { Grid, Icon, Text } from "@tremor/react";

export default function Menu() {
  return (
    <Grid numCols={3} className="fixed bottom-0 left-0 w-screen">
      <Grid className="place-items-center">
        <Icon icon={HomeIcon} />
        <Text>ホーム</Text>
      </Grid>
      <Grid className="place-items-center">
        <Icon icon={HeartIcon} />
        <Text>お気に入り</Text>
      </Grid>
      <Grid className="place-items-center">
        <Icon icon={SearchIcon} />
        <Text>検索</Text>
      </Grid>
    </Grid>
  );
}

import Menu from "./_component/Menu";

export default function Home() {
  return (
    <main>
      <Menu />
    </main>
  );
}