🎃

【Convex】NextJs14 と Convex【#９Tooltip】

2024/04/04に公開

Next.js

【#９Tooltip】

YouTube: https://youtu.be/U2MngKTEAlc

https://youtu.be/U2MngKTEAlc

今回はOrganizationのアイコンにマウスホバーした際に
Organizationの名前が表示されるように実装を進めていきます。

まずはshadcn-uiからTooltipをインストールします。

npx shadcn-ui@latest add tooltip

components/ui/tooltip-wrapper.tsx

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
  TooltipProvider,
} from "@/components/ui/tooltip";
import { TooltipContentProps } from "@radix-ui/react-tooltip";

interface Props {
  children: React.ReactNode;
  label: string;
  side?: TooltipContentProps["side"];
  sideOffset?: TooltipContentProps["sideOffset"];
}

export const TooltipWrapper = ({
  children,
  label,
  side = "right",
  sideOffset = 10,
}: Props) => {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>{children}</TooltipTrigger>
        <TooltipContent side={side} sideOffset={sideOffset}>
          {label}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};

my-app/(main)/_components/org-list-item.tsx

import Image from "next/image";
import { useOrganization, useOrganizationList } from "@clerk/nextjs";

import { cn } from "@/lib/utils";
import { TooltipWrapper } from "@/components/ui/tooltip-wrapper";

interface Props {
  id: string;
  name: string;
  imageUrl: string;
}

export const OrgListItem = ({ id, name, imageUrl }: Props) => {
  const { organization } = useOrganization();
  const { setActive } = useOrganizationList();

  const isActive = organization?.id === id;

  const onClick = () => {
    if (!setActive) return;

    setActive({ organization: id });
  };

  return (
    <li className="aspect-square relative">
      <TooltipWrapper label={name} side="right" sideOffset={10}>
        <Image
          src={imageUrl}
          alt={name}
          fill
          onClick={onClick}
          className={cn(
            "rounded-md cursor-pointer opacity-75 hover:opacity-100 transition",
            isActive && "opacity-100"
          )}
        />
      </TooltipWrapper>
    </li>
  );
};

【#９Tooltip】

Discussion