マップフレームの作成

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 MapFrame from "@/components/ui/MapFrame";
 import EventFrame from "@/components/ui/EventFrame";
 
 const previewSlides = ["Slide 1", "Slide 2", "Slide 3"];
@@ -148,6 +149,11 @@ export default function DevCommonComponentsPage() {
             <SectionTitle title="PICK UP" />
           </div>
         </DevPanel>
+        <DevPanel title="MapFrame">
+          <MapFrame imageSrc="/image/top/HeroAll.png" alt="Map" type="short" title="1F" />
+          <MapFrame imageSrc="/image/top/HeroAll.png" alt="Map" type="long" title="長いテキスト" />
+          <MapFrame title="画像が無い場合" />
+        </DevPanel>
         <DevPanel title="EventFrame">
           <div className="flex flex-wrap gap-m p-m">
             <EventFrame

src/components/aria/DateRangePicker.tsx

@@ -36,7 +36,7 @@ export function DateRangePicker<T extends DateValue>({
     >
       {label && <Label>{label}</Label>}
       <FieldGroup className="w-auto min-w-[208px] cursor-text disabled:cursor-default">
-        <div className="flex w-fit flex-1 [scrollbar-width:none] items-center overflow-x-auto overflow-y-clip">
+        <div className="flex w-fit flex-1 items-center overflow-x-auto overflow-y-clip [scrollbar-width:none]">
           <DateInput slot="start" className="ps-3 pe-2 text-sm" />
           <span
             aria-hidden="true"

src/components/layout/HeaderMenuButton.tsx

@@ -106,7 +106,7 @@ export default function HeaderMenuButton() {
         aria-modal="false"
         aria-label="メインメニュー"
         aria-hidden={!isMenuOpen}
-        className={`fixed top-(--header-height) right-0 z-350 hidden h-[calc(100dvh-var(--header-height))] w-full max-w-97.5 scrollbar-gutter-stable overflow-y-auto overscroll-contain bg-base-dark ease-out motion-safe:transition-transform motion-safe:duration-300 md:block ${
+        className={`scrollbar-gutter-stable fixed top-(--header-height) right-0 z-350 hidden h-[calc(100dvh-var(--header-height))] w-full max-w-97.5 overflow-y-auto overscroll-contain bg-base-dark ease-out motion-safe:transition-transform motion-safe:duration-300 md:block ${
           isMenuOpen ? "translate-x-0" : "pointer-events-none translate-x-full ease-in"
         }`}
       >

src/components/ui/MapFrame.tsx

@@ -0,0 +1,35 @@
+import Image from "next/image";
+
+type MapFrameProps = {
+  imageSrc?: string;
+  alt?: string;
+  title?: string;
+  type?: "short" | "long";
+};
+
+export default function MapFrame({ imageSrc, alt, title, type = "long" }: MapFrameProps) {
+  return (
+    <div className="relative flex w-full flex-col">
+      <div className="w-full px-10">
+        <div className="flex w-full items-start items-stretch gap-0">
+          <div
+            className={`bg-main px-4 py-[4px] text-text-large text-base ${type === "short" ? "w-[50px]" : "w-[194px]"}`}
+          >
+            <span className="leading-tight break-words whitespace-normal">{title}</span>
+          </div>
+          <div className="-ml-px w-[20px] self-stretch bg-main [clip-path:polygon(0%_0%,20%_0%,100%_100%,0%_100%)]"></div>
+        </div>
+        <div className="relative flex aspect-4/3 items-center justify-center overflow-hidden border-2 border-main text-text-large">
+          {imageSrc ? (
+            <Image src={imageSrc} alt={alt || ""} fill className="object-cover" />
+          ) : (
+            <div className="flex h-full w-full flex-col items-center justify-center gap-2 bg-base text-center text-main">
+              <p className="font-kaisotai text-[24px]">MAP</p>
+              <p>NO IMAGE</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}