feat: integrate Cloudinary image upload, Instagram Feed, and fix Next.js warnings
This commit is contained in:
+188
-155
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Calendar, Music, Disc3, CalendarDays, Zap } from 'lucide-react';
|
||||
import { Calendar, Music, Disc3, CalendarDays, Zap, GlassWater } from 'lucide-react';
|
||||
|
||||
/* ── static data ───────────────────────────────── */
|
||||
|
||||
@@ -13,6 +13,17 @@ const ACTIVE_DAYS: Record<number, string> = {
|
||||
5: '#00E5FF',
|
||||
};
|
||||
|
||||
/* ── types ─────────────────────────────────────── */
|
||||
type EventItem = {
|
||||
id: string;
|
||||
title: string;
|
||||
time: string;
|
||||
tag: string;
|
||||
iconType: string;
|
||||
colorTheme: string;
|
||||
isFeatured: boolean;
|
||||
};
|
||||
|
||||
/* ── sub-components ────────────────────────────── */
|
||||
|
||||
function VinylDisc() {
|
||||
@@ -92,9 +103,72 @@ function WineGlassIcon() {
|
||||
|
||||
/* ── main component ────────────────────────────── */
|
||||
|
||||
export default function Events() {
|
||||
export default function Events({ dbEvents = [] }: { dbEvents?: any[] }) {
|
||||
const t = useTranslations('Events');
|
||||
|
||||
// Hardcoded fallback data if db is empty
|
||||
const defaultEvents: EventItem[] = dbEvents.length > 0 ? dbEvents : [
|
||||
{
|
||||
id: "fallback-1",
|
||||
title: t('cards.dj.title'),
|
||||
time: t('cards.dj.time'),
|
||||
tag: "EN POPÜLER",
|
||||
iconType: "dj",
|
||||
colorTheme: "cyan",
|
||||
isFeatured: true,
|
||||
},
|
||||
{
|
||||
id: "fallback-2",
|
||||
title: t('cards.raki.title'),
|
||||
time: t('cards.raki.time'),
|
||||
tag: "PER",
|
||||
iconType: "glass",
|
||||
colorTheme: "coral",
|
||||
isFeatured: false,
|
||||
},
|
||||
{
|
||||
id: "fallback-3",
|
||||
title: t('cards.live_music.title'),
|
||||
time: t('cards.live_music.time'),
|
||||
tag: "★ ÖZEL",
|
||||
iconType: "music",
|
||||
colorTheme: "amber",
|
||||
isFeatured: false,
|
||||
}
|
||||
];
|
||||
|
||||
const featuredEvent = defaultEvents.find(e => e.isFeatured) || defaultEvents[0];
|
||||
const secondaryEvents = defaultEvents.filter(e => e.id !== featuredEvent.id);
|
||||
|
||||
// Tema renklerini almak için yardımcı fonksiyon
|
||||
const getThemeColor = (theme: string) => {
|
||||
switch (theme) {
|
||||
case 'cyan': return '#00E5FF';
|
||||
case 'coral': return '#FF5A36';
|
||||
case 'amber': return '#FFA827';
|
||||
default: return '#00E5FF';
|
||||
}
|
||||
};
|
||||
|
||||
const getThemeColors = (theme: string) => {
|
||||
switch (theme) {
|
||||
case 'cyan': return { main: '#00E5FF', bg: '#00E5FF1A', borderSpin: 'border-spin-cyan', darkBg: '#0C1828' };
|
||||
case 'coral': return { main: '#FF5A36', bg: '#FF5A361A', borderSpin: 'border-spin-coral', darkBg: '#0C0808', hoverBg: '#110a0a' };
|
||||
case 'amber': return { main: '#FFA827', bg: '#FFA8271A', borderSpin: 'border-spin-amber', darkBg: '#0C0A04', hoverBg: '#110d04' };
|
||||
default: return { main: '#00E5FF', bg: '#00E5FF1A', borderSpin: 'border-spin-cyan', darkBg: '#0C1828', hoverBg: '#0C1828' };
|
||||
}
|
||||
};
|
||||
|
||||
// İkon bileşenini render etme yardımcı fonksiyonu
|
||||
const renderIcon = (type: string, size: number = 22) => {
|
||||
switch(type) {
|
||||
case 'dj': return <Disc3 size={size} />;
|
||||
case 'glass': return <WineGlassIcon />;
|
||||
case 'music': return <Music size={size} />;
|
||||
default: return <Music size={size} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
id="events"
|
||||
@@ -192,167 +266,126 @@ export default function Events() {
|
||||
})}
|
||||
</motion.div>
|
||||
|
||||
{/* ── Featured Event: DJ Nights ────────────── */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
className="border-spin-cyan rounded-3xl p-px overflow-hidden"
|
||||
>
|
||||
<div
|
||||
className="rounded-3xl p-8 md:p-10 flex flex-col md:flex-row items-center gap-8 overflow-hidden relative"
|
||||
style={{ background: '#0C1828' }}
|
||||
>
|
||||
{/* Glow center */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(ellipse at 80% 50%, rgba(0,229,255,0.08) 0%, transparent 60%)',
|
||||
}}
|
||||
/>
|
||||
{/* ── Featured Event (Dinamic) ────────────── */}
|
||||
{featuredEvent && (() => {
|
||||
const c = getThemeColors(featuredEvent.colorTheme);
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 24 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7 }}
|
||||
className={`${c.borderSpin} rounded-3xl p-px overflow-hidden`}
|
||||
>
|
||||
<div
|
||||
className="rounded-3xl p-8 md:p-10 flex flex-col md:flex-row items-center gap-8 overflow-hidden relative"
|
||||
style={{ background: c.darkBg }}
|
||||
>
|
||||
{/* Glow center */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(ellipse at 80% 50%, ${c.main}14 0%, transparent 60%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Left: text */}
|
||||
<div className="flex-1 relative z-10">
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<span
|
||||
className="text-[10px] font-black uppercase tracking-[0.35em] px-3 py-1.5 rounded-full"
|
||||
style={{ background: '#00E5FF1A', color: '#00E5FF' }}
|
||||
>
|
||||
EN POPÜLER
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5 text-white/40 text-xs">
|
||||
<Calendar size={11} />
|
||||
<span>{t('cards.dj.time')}</span>
|
||||
{/* Left: text */}
|
||||
<div className="flex-1 relative z-10">
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<span
|
||||
className="text-[10px] font-black uppercase tracking-[0.35em] px-3 py-1.5 rounded-full"
|
||||
style={{ background: c.bg, color: c.main }}
|
||||
>
|
||||
{featuredEvent.tag}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5 text-white/40 text-xs">
|
||||
<Calendar size={11} />
|
||||
<span>{featuredEvent.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="font-heading text-4xl md:text-5xl font-black mb-3 text-white leading-tight">
|
||||
{featuredEvent.title}
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center gap-3 mb-7">
|
||||
<div style={{ color: c.main }}>
|
||||
{renderIcon(featuredEvent.iconType, 18)}
|
||||
</div>
|
||||
<span className="text-white/50 text-sm">Open-air · Beach Stage</span>
|
||||
</div>
|
||||
|
||||
<EqBars color={c.main} />
|
||||
</div>
|
||||
|
||||
{/* Right: vinyl */}
|
||||
<div className="relative z-10 flex-shrink-0">
|
||||
<VinylDisc />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})()}
|
||||
|
||||
<h3 className="font-heading text-4xl md:text-5xl font-black mb-3 text-white leading-tight">
|
||||
{t('cards.dj.title')}
|
||||
</h3>
|
||||
{/* ── Secondary events: 2-col grid (Dinamic) ─────────── */}
|
||||
{secondaryEvents.length > 0 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
{secondaryEvents.map((evt, i) => {
|
||||
const c = getThemeColors(evt.colorTheme);
|
||||
return (
|
||||
<motion.div
|
||||
key={evt.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 * (i + 1) }}
|
||||
className={`${c.borderSpin} rounded-3xl p-px group cursor-pointer`}
|
||||
>
|
||||
<div
|
||||
className="rounded-3xl p-7 h-full flex flex-col gap-5 relative overflow-hidden transition-colors duration-300"
|
||||
style={{ background: c.darkBg }}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-400 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(ellipse at 20% 50%, ${c.main}1A 0%, transparent 65%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-3 mb-7">
|
||||
<Disc3 size={18} style={{ color: '#00E5FF' }} />
|
||||
<span className="text-white/50 text-sm">Open-air · Beach Stage</span>
|
||||
</div>
|
||||
<div className="flex items-start justify-between">
|
||||
<div
|
||||
className="w-12 h-12 rounded-2xl flex items-center justify-center"
|
||||
style={{ background: c.bg, color: c.main }}
|
||||
>
|
||||
{renderIcon(evt.iconType, 22)}
|
||||
</div>
|
||||
<span
|
||||
className="text-[10px] font-black uppercase tracking-wider px-2.5 py-1 rounded-full"
|
||||
style={{ background: c.bg, color: c.main }}
|
||||
>
|
||||
{evt.tag}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<EqBars color="#00E5FF" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-heading text-2xl font-black text-white mb-2">
|
||||
{evt.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1.5 text-sm text-white/40">
|
||||
<Calendar size={12} />
|
||||
<span>{evt.time}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: vinyl */}
|
||||
<div className="relative z-10 flex-shrink-0">
|
||||
<VinylDisc />
|
||||
</div>
|
||||
<div className="mt-auto opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<EqBars color={c.main} />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* ── Secondary events: 2-col grid ─────────── */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
|
||||
{/* Rakı Geceleri */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="border-spin-coral rounded-3xl p-px group cursor-pointer"
|
||||
>
|
||||
<div
|
||||
className="rounded-3xl p-7 h-full flex flex-col gap-5 relative overflow-hidden transition-colors duration-300 group-hover:bg-[#110a0a]"
|
||||
style={{ background: '#0C0808' }}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-400 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(ellipse at 20% 50%, rgba(255,90,54,0.1) 0%, transparent 65%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex items-start justify-between">
|
||||
<div
|
||||
className="w-12 h-12 rounded-2xl flex items-center justify-center"
|
||||
style={{ background: '#FF5A361A', color: '#FF5A36' }}
|
||||
>
|
||||
<WineGlassIcon />
|
||||
</div>
|
||||
<span
|
||||
className="text-[10px] font-black uppercase tracking-wider px-2.5 py-1 rounded-full"
|
||||
style={{ background: '#FF5A361A', color: '#FF5A36' }}
|
||||
>
|
||||
PER
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-heading text-2xl font-black text-white mb-2">
|
||||
{t('cards.raki.title')}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1.5 text-sm text-white/40">
|
||||
<Calendar size={12} />
|
||||
<span>{t('cards.raki.time')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<EqBars color="#FF5A36" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Canlı Müzik */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="border-spin-amber rounded-3xl p-px group cursor-pointer"
|
||||
>
|
||||
<div
|
||||
className="rounded-3xl p-7 h-full flex flex-col gap-5 relative overflow-hidden transition-colors duration-300 group-hover:bg-[#110d04]"
|
||||
style={{ background: '#0C0A04' }}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-400 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(ellipse at 80% 50%, rgba(255,168,39,0.1) 0%, transparent 65%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex items-start justify-between">
|
||||
<div
|
||||
className="w-12 h-12 rounded-2xl flex items-center justify-center"
|
||||
style={{ background: '#FFA8271A', color: '#FFA827' }}
|
||||
>
|
||||
<Music size={22} />
|
||||
</div>
|
||||
<span
|
||||
className="text-[10px] font-black uppercase tracking-wider px-2.5 py-1 rounded-full"
|
||||
style={{ background: '#FFA8271A', color: '#FFA827' }}
|
||||
>
|
||||
★ ÖZEL
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-heading text-2xl font-black text-white mb-2">
|
||||
{t('cards.live_music.title')}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1.5 text-sm text-white/40">
|
||||
<Calendar size={12} />
|
||||
<span>{t('cards.live_music.time')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<EqBars color="#FFA827" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Wave → sand */}
|
||||
|
||||
Reference in New Issue
Block a user