+
+ );
+ }
+
+ return (
+ Загрузка...
+
+
+ );
+}
diff --git a/admin/src/components/EventForm.tsx b/admin/src/components/EventForm.tsx
new file mode 100644
index 0000000..139b49e
--- /dev/null
+++ b/admin/src/components/EventForm.tsx
@@ -0,0 +1,266 @@
+'use client';
+
+import { useState } from 'react';
+import { api, CreateEventInput } from '@/lib/api';
+
+type EventType = 'recurring' | 'anniversary' | 'duration';
+
+interface EventFormProps {
+ onEventCreated: () => void;
+}
+
+export function EventForm({ onEventCreated }: EventFormProps) {
+ const [eventType, setEventType] = useState
+
+ + 📅 Управление событиями +
+ +
+
+ );
+}
diff --git a/admin/src/components/EventList.tsx b/admin/src/components/EventList.tsx
new file mode 100644
index 0000000..6fbc677
--- /dev/null
+++ b/admin/src/components/EventList.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { useState } from 'react';
+import { api, Event } from '@/lib/api';
+
+interface EventListProps {
+ title: string;
+ events: Event[];
+ onEventDeleted: () => void;
+}
+
+export function EventList({ title, events, onEventDeleted }: EventListProps) {
+ const [deleting, setDeleting] = useStateДобавить событие
+ +
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/admin/src/components/Timeline.tsx b/admin/src/components/Timeline.tsx
new file mode 100644
index 0000000..885781f
--- /dev/null
+++ b/admin/src/components/Timeline.tsx
@@ -0,0 +1,491 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { api } from '@/lib/api';
+
+interface TimelineEvent {
+ id: string;
+ type: string;
+ emoji: string;
+ name: string;
+ date: string;
+ display: string;
+ days: number;
+ hours: number;
+ minutes: number;
+ yearsPassed?: number;
+ daysPassed?: number;
+ startYear?: number;
+}
+
+interface TimelineGridItem {
+ days: number;
+ date: string;
+ weekday: string;
+}
+
+interface MonthMarker {
+ name: string;
+ days: number;
+}
+
+export function Timeline() {
+ const [events, setEvents] = useState{title}
+-
+ {events.map((event) => (
+
-
+ + {event.emoji} ++ +++{event.title}+{formatDate(event)}+
+ ))}
+
+
+ );
+ } else {
+ return (
+
+
+ {months}
+
+ {months === 1 ? 'месяц' : months >= 2 && months <= 4 ? 'месяца' : 'месяцев'}
+
+
+
+ {remainingDays}
+
+ {remainingDays === 1 ? 'день' : remainingDays >= 2 && remainingDays <= 4 ? 'дня' : 'дней'}
+
+
+
+ );
+ }
+ };
+
+ return (
+
+
+ {days}
+
+ {days === 1 ? 'день' : days >= 2 && days <= 4 ? 'дня' : 'дней'}
+
+
+
+ {event.hours}
+
+ {event.hours === 1 ? 'час' : event.hours >= 2 && event.hours <= 4 ? 'часа' : 'часов'}
+
+
+
+ );
+}
diff --git a/admin/src/lib/api.ts b/admin/src/lib/api.ts
new file mode 100644
index 0000000..06340ae
--- /dev/null
+++ b/admin/src/lib/api.ts
@@ -0,0 +1,56 @@
+const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
+
+export interface Event {
+ id: string;
+ title: string;
+ emoji: string;
+ month: number;
+ day: number;
+ startYear?: number | null;
+ endMonth?: number | null;
+ endDay?: number | null;
+ endYear?: number | null;
+ description?: string | null;
+ color?: string | null;
+ isActive: boolean;
+ tags?: string[] | null;
+}
+
+export interface CreateEventInput {
+ title: string;
+ emoji: string;
+ month: number;
+ day: number;
+ startYear?: number;
+ endMonth?: number;
+ endDay?: number;
+ endYear?: number;
+ description?: string;
+ color?: string;
+ tags?: string[];
+}
+
+export const api = {
+ async getAllEvents(): Promise📅 Временная шкала
+ +
+ {/* Линия времени - Зона 1 (0-25%) */}
+
+
+ {/* Линия времени - Зона 2 (25-100%) */}
+
+
+ {/* Маркер "Сегодня" */}
+
+
+
+
+ 🔥
+
+
+ {/* События */}
+ {events.map((event) => {
+ if (event.days >= maxDays) return null;
+
+ const position = calculatePosition(event.days);
+ const shakeClass = getShakeClass(position);
+
+ return (
+ {
+ if (el) {
+ eventRefs.current.set(event.id, el);
+ } else {
+ eventRefs.current.delete(event.id);
+ }
+ }}
+ className={`absolute top-[35%] -translate-x-1/2 -translate-y-1/2 cursor-pointer z-10 transition-all duration-300 ${shakeClass}`}
+ style={{ left: `${position}%` }}
+ onMouseEnter={() => setHoveredEvent(event.id)}
+ onMouseLeave={() => setHoveredEvent(null)}
+ >
+ {/* Emoji */}
+
+ );
+ })}
+
+ {/* Интерактивная сетка */}
+ {timelineGrid.map((gridItem, index) => {
+ if (gridItem.days >= maxDays) return null;
+
+ const position = calculatePosition(gridItem.days);
+ const width = calculateGridWidth(gridItem.days);
+
+ return (
+
+ {event.emoji}
+
+
+ {/* Tooltip */}
+ {hoveredEvent === event.id && (
+
+
+ )}
+
+ {/* Название */}
+
+
+
+
+ {/* Дата */}
+ {event.emoji}
+ {event.name}
+
+
+
+ {/* Годовщина */}
+ {event.type === 'anniversary' && event.yearsPassed && (
+ 📅 Дата:
+ {event.date}
+
+
+ )}
+
+ {/* Countdown */}
+ 🎉 Годовщина
+
+ {event.yearsPassed}{' '}
+ {event.yearsPassed % 10 === 1 && event.yearsPassed % 100 !== 11
+ ? 'год'
+ : event.yearsPassed % 10 >= 2 &&
+ event.yearsPassed % 10 <= 4 &&
+ (event.yearsPassed % 100 < 12 || event.yearsPassed % 100 > 14)
+ ? 'года'
+ : 'лет'}
+
+
+
+
+ {/* Стрелка */}
+
+ ⏰ Осталось
+ {formatCountdown(event)}
+ setHoveredGrid(index)}
+ onMouseLeave={() => setHoveredGrid(null)}
+ >
+ {/* Grid tooltip */}
+ {hoveredGrid === index && (
+
+ );
+ })}
+
+ {/* Метки месяцев */}
+ {months.map((month, index) => {
+ if (month.days >= maxDays) return null;
+
+ const position = calculatePosition(month.days);
+
+ return (
+
+
+ )}
+
+
+
+ {gridItem.weekday}
+
+
+ 📅 {gridItem.date}
+
+
+ {/* Стрелка */}
+
+
+ {month.name}
+
+ );
+ })}
+
+ 
+
A progressive Node.js framework for building efficient and scalable server-side applications.
+
+
+
+
+
+
+
+ 
+ 
+ 
+