44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import { MenuItem } from "./types";
|
||
|
|
|
||
|
|
interface MenuGridProps {
|
||
|
|
items: MenuItem[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export function MenuGrid({ items }: MenuGridProps) {
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
const handleClick = (item: MenuItem) => {
|
||
|
|
if (item.href === "#") {
|
||
|
|
alert(`${item.title} 화면은 준비 중입니다.`);
|
||
|
|
} else {
|
||
|
|
router.push(item.href);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="pop-dashboard-menu-grid">
|
||
|
|
{items.map((item) => (
|
||
|
|
<div
|
||
|
|
key={item.id}
|
||
|
|
className={`pop-dashboard-menu-card ${item.category}`}
|
||
|
|
onClick={() => handleClick(item)}
|
||
|
|
>
|
||
|
|
<div className="pop-dashboard-menu-header">
|
||
|
|
<div className="pop-dashboard-menu-title">{item.title}</div>
|
||
|
|
<div className={`pop-dashboard-menu-count ${item.category}`}>
|
||
|
|
{item.count}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="pop-dashboard-menu-desc">{item.description}</div>
|
||
|
|
<div className="pop-dashboard-menu-status">{item.status}</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|