106 lines
5.3 KiB
TypeScript
106 lines
5.3 KiB
TypeScript
'use client';
|
||
|
||
interface QuickMenuCardsProps {
|
||
onLiveStreamClick: () => void;
|
||
onNewsClick: () => void;
|
||
onDocumentsClick: () => void;
|
||
onMediaClick: () => void;
|
||
onComplaintClick: () => void;
|
||
onContactClick: () => void;
|
||
}
|
||
|
||
export default function QuickMenuCards({
|
||
onLiveStreamClick,
|
||
onNewsClick,
|
||
onDocumentsClick,
|
||
onMediaClick,
|
||
onComplaintClick,
|
||
onContactClick
|
||
}: QuickMenuCardsProps) {
|
||
return (
|
||
<div className="relative md:absolute md:bottom-0 md:left-0 md:right-0 z-20 md:translate-y-3/4 bg-[#003366] md:bg-transparent py-6 md:py-0">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-4">
|
||
{/* Canlı Yayın */}
|
||
<button
|
||
onClick={onLiveStreamClick}
|
||
className="bg-white rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
|
||
>
|
||
<div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||
<svg fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4zM14 13h-3v3H9v-3H6v-2h3V8h2v3h3v2z"/>
|
||
</svg>
|
||
</div>
|
||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Canlı Yayın</span>
|
||
</button>
|
||
|
||
{/* Haberler */}
|
||
<button
|
||
onClick={onNewsClick}
|
||
className="bg-white rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
|
||
>
|
||
<div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||
<svg fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/>
|
||
</svg>
|
||
</div>
|
||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Haberler</span>
|
||
</button>
|
||
|
||
{/* Belgeler */}
|
||
<button
|
||
onClick={onDocumentsClick}
|
||
className="bg-white rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
|
||
>
|
||
<div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||
<svg fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>
|
||
</svg>
|
||
</div>
|
||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Belgeler</span>
|
||
</button>
|
||
|
||
{/* Medya Galerisi */}
|
||
<button
|
||
onClick={onMediaClick}
|
||
className="bg-white rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
|
||
>
|
||
<div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||
<svg fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z"/>
|
||
</svg>
|
||
</div>
|
||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Medya Galerisi</span>
|
||
</button>
|
||
|
||
{/* Dilek-Şikayet */}
|
||
<button
|
||
onClick={onComplaintClick}
|
||
className="bg-white rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
|
||
>
|
||
<div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||
<svg fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/>
|
||
</svg>
|
||
</div>
|
||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">Dilek-Şikayet</span>
|
||
</button>
|
||
|
||
{/* E-İletişim */}
|
||
<button
|
||
onClick={onContactClick}
|
||
className="bg-white rounded-xl p-4 md:p-6 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 flex flex-col items-center text-center group"
|
||
>
|
||
<div className="w-10 h-10 md:w-12 md:h-12 mb-2 md:mb-3 text-[#004B87] group-hover:text-[#00B4D8] transition-colors">
|
||
<svg fill="currentColor" viewBox="0 0 24 24">
|
||
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
|
||
</svg>
|
||
</div>
|
||
<span className="text-[#004B87] font-semibold text-xs md:text-sm">E-İletişim</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|