30 lines
903 B
TypeScript
30 lines
903 B
TypeScript
|
"use client";
|
||
|
|
import React from "react";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
height?: number | string; // ex) 224 or '14rem'
|
||
|
|
className?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
// Figma 선택 요소(Container_Event)를 그대로 옮긴 플레이스홀더형 배너
|
||
|
|
export function SelectedBanner({ height = 122, className }: Props) {
|
||
|
|
return (
|
||
|
|
<section
|
||
|
|
className={`relative w-full overflow-hidden rounded-[12px] bg-[#D9D9D9] ${className ?? ""}`}
|
||
|
|
style={{ height }}
|
||
|
|
aria-label="banner"
|
||
|
|
>
|
||
|
|
<div className="absolute left-1/2 -translate-x-1/2 flex items-center gap-[6px]" style={{ bottom: 12 }}>
|
||
|
|
<span className="block h-[4px] w-[18px] rounded-full bg-[#F94B37]" aria-hidden />
|
||
|
|
{Array.from({ length: 12 }).map((_, i) => (
|
||
|
|
<span key={i} className="block h-[6px] w-[6px] rounded-full bg-[#B9B9B9]" aria-hidden />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default SelectedBanner;
|
||
|
|
|
||
|
|
|