37 lines
901 B
TypeScript
37 lines
901 B
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import React from "react";
|
|
|
|
interface ModalBackdropProps {
|
|
/** 背景フェードの時間（秒） */
|
|
duration?: number;
|
|
/** デフォルトの背景クラスを上書きしたい場合 */
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* ModalBackdrop
|
|
* 全モーダルで共通使用する背景フェードコンポーネント
|
|
*
|
|
* 例:
|
|
* <ModalBackdrop /> // デフォルトの黒背景
|
|
* <ModalBackdrop className="bg-white/30" /> // 明るい背景など個別調整も可能
|
|
*/
|
|
export default function ModalBackdrop({
|
|
duration = 0.2,
|
|
className = "fixed inset-0 bg-black/40 backdrop-blur-sm",
|
|
}: ModalBackdropProps) {
|
|
return (
|
|
<motion.div
|
|
key="backdrop"
|
|
className={className}
|
|
aria-hidden="true"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration }}
|
|
/>
|
|
);
|
|
}
|