企画フレームの作成

src/app/(frontend)/(dev)/dev/common/page.tsx

@@ -30,6 +30,7 @@ import { DevSection } from "../_components/DevSection";
 import ButtonMain from "@/components/ui/ButtonMain";
 import SectionTitle from "@/components/ui/SectionTitle";
 import { sampleNewsItems } from "../_data/sampleNews";
+import EventFrame from "@/components/ui/EventFrame";
 
 const previewSlides = ["Slide 1", "Slide 2", "Slide 3"];
 const noImportantNewsMessage = "現在、重要なお知らせはありません。";
@@ -147,6 +148,25 @@ export default function DevCommonComponentsPage() {
             <SectionTitle title="PICK UP" />
           </div>
         </DevPanel>
+        <DevPanel title="EventFrame">
+          <div className="flex flex-wrap gap-m p-m">
+            <EventFrame
+              name="あいうえおかきくけこさしすせ"
+              href="/"
+              imageUrl="/icon/Instagram.png"
+            />
+            <EventFrame
+              name="あいうえおかきくけこさしすせそ"
+              href="/"
+              imageUrl="/icon/Instagram.png"
+            />
+            <EventFrame
+              name="あいうえおかきくけこさしすせそたちつてとなにぬねの"
+              href="/"
+              imageUrl="/icon/Instagram.png"
+            />
+          </div>
+        </DevPanel>
       </DevSection>
     </DevPageContainer>
   );

src/components/aria/Tooltip.tsx

@@ -13,7 +13,7 @@ export interface TooltipProps extends Omit<AriaTooltipProps, "children"> {
 }
 
 const styles = tv({
-  base: "group bg-neutral-700 dark:bg-neutral-600 border border-neutral-800 dark:border-white/10 font-sans text-xs text-white rounded-lg drop-shadow-lg will-change-transform px-3 py-1.5 box-border",
+  base: "group bg-white border border-neutral-200 font-sans text-xs text-neutral-900 rounded-lg drop-shadow-lg will-change-transform px-3 py-1.5 box-border",
   variants: {
     isEntering: {
       true: "animate-in fade-in placement-bottom:slide-in-from-top-0.5 placement-top:slide-in-from-bottom-0.5 placement-left:slide-in-from-right-0.5 placement-right:slide-in-from-left-0.5 ease-out duration-200",
@@ -24,11 +24,11 @@ const styles = tv({
   },
 });
 
-export function Tooltip({ children, ...props }: TooltipProps) {
+export function Tooltip({ children, offset = 10, ...props }: TooltipProps) {
   return (
     <AriaTooltip
       {...props}
-      offset={10}
+      offset={offset}
       className={composeRenderProps(props.className, (className, renderProps) =>
         styles({ ...renderProps, className }),
       )}
@@ -38,7 +38,7 @@ export function Tooltip({ children, ...props }: TooltipProps) {
           width={8}
           height={8}
           viewBox="0 0 8 8"
-          className="group-placement-left:-rotate-90 group-placement-right:rotate-90 group-placement-bottom:rotate-180 block fill-neutral-700 stroke-neutral-800 dark:fill-neutral-600 dark:stroke-white/10 forced-colors:fill-[Canvas] forced-colors:stroke-[ButtonBorder]"
+          className="group-placement-left:-rotate-90 group-placement-right:rotate-90 group-placement-bottom:rotate-180 block fill-white stroke-neutral-200 forced-colors:fill-[Canvas] forced-colors:stroke-[ButtonBorder]"
         >
           <path d="M0 0 L4 4 L8 0" />
         </svg>

src/components/ui/EventFrame.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { TooltipTrigger, Focusable } from "react-aria-components";
+import { Tooltip } from "@/components/aria/Tooltip";
+
+type EventFrameProps = {
+  name: string;
+  href: string;
+  imageUrl: string;
+};
+
+const DISPLAY_NAME_MAX_LENGTH = 24;
+const LARGE_TEXT_MAX_LENGTH = 14;
+const TOOLTIP_OFFSET = -120;
+const FALLBACK_LOGO = "/favicon/45th-LogoBlue.svg";
+
+export default function EventFrame(props: EventFrameProps) {
+  const { name, href, imageUrl } = props;
+
+  const [hasImageError, setHasImageError] = useState(false);
+
+  const handleImageError = () => {
+    setHasImageError(true);
+  };
+
+  const isTruncated = name.length > DISPLAY_NAME_MAX_LENGTH;
+
+  const displayName = isTruncated ? name.slice(0, DISPLAY_NAME_MAX_LENGTH - 1) + "…" : name;
+
+  const nameClassName =
+    name.length <= LARGE_TEXT_MAX_LENGTH ? "text-textb" : "text-[14px] leading-[20px]";
+
+  const card = (
+    <Link
+      href={href}
+      aria-label={name}
+      prefetch={false}
+      className="flex h-[200px] w-[148px] flex-col rounded-lg bg-secondary pb-s shadow-[0px_6px_8px_rgba(60,224,232,0.6)] transition-all duration-200 hover:-translate-y-1 hover:shadow-[0px_6px_8px_rgba(60,224,232,1.0)]"
+    >
+      <div className="relative h-[111px] w-full shrink-0 overflow-hidden rounded-tl-lg rounded-tr-lg">
+        {hasImageError ? (
+          <Image className="object-contain" src={FALLBACK_LOGO} alt="" fill sizes="148px" />
+        ) : (
+          <Image
+            className="object-cover"
+            src={imageUrl}
+            alt=""
+            fill
+            sizes="148px"
+            onError={handleImageError}
+          />
+        )}
+      </div>
+
+      <div className="mt-auto flex h-4l items-center px-s">
+        <div className={nameClassName}>{displayName}</div>
+      </div>
+    </Link>
+  );
+
+  if (!isTruncated) {
+    return card;
+  }
+
+  return (
+    <TooltipTrigger delay={300} closeDelay={300}>
+      <Focusable>{card}</Focusable>
+      <Tooltip className="max-w-55 wrap-break-word" offset={TOOLTIP_OFFSET}>
+        {name}
+      </Tooltip>
+    </TooltipTrigger>
+  );
+}