+
{format(currentDate, "yyyy")}
{/* Month Navigation Pill */}
-
+
-
+
{format(currentDate, "MMMM")}
@@ -120,7 +120,7 @@ export default function CalendarComponent() {
{/* Calendar Grid Container */}
-
+
{/* Days Header */}
{(isMobile
@@ -129,7 +129,7 @@ export default function CalendarComponent() {
).map((day) => (
{day}
@@ -137,7 +137,7 @@ export default function CalendarComponent() {
{/* Days Grid */}
-
+
{calendarDays.map((day, idx) => {
const isSelected = isSameDay(day, selectedDate);
const isCurrentMonth = isSameMonth(day, monthStart);
@@ -171,9 +171,9 @@ export default function CalendarComponent() {
key={idx}
onClick={() => setSelectedDate(day)}
className={cn(
- "relative flex flex-col transition-all duration-300",
+ "relative flex items-center justify-center md:flex-col md:items-stretch md:justify-start transition-all duration-300",
"aspect-square md:aspect-[1.3/1]",
- "rounded-full p-2 md:rounded-[18px] md:p-4",
+ "rounded-full p-1 sm:p-2 md:rounded-[18px] md:p-4",
!isCurrentMonth ? "opacity-30 md:bg-white/40" : "opacity-100",
isSelected
? "bg-[#318D62] text-white shadow-lg md:shadow-none"
@@ -185,7 +185,7 @@ export default function CalendarComponent() {
{/* Date Number - Top Left on Desktop, Center on Mobile */}
-
-
+
+
{isSameDay(selectedDate, new Date())
? "Today's Content"
: format(selectedDate, "MMMM do")}
@@ -380,7 +380,7 @@ export default function CalendarComponent() {
) : (
-
+
diff --git a/frontend/src/components/calendar/CalendarPostCard.tsx b/frontend/src/components/calendar/CalendarPostCard.tsx
index 4ea9455..8915b42 100644
--- a/frontend/src/components/calendar/CalendarPostCard.tsx
+++ b/frontend/src/components/calendar/CalendarPostCard.tsx
@@ -1,6 +1,7 @@
"use client";
import Image from "next/image";
+import { useRouter } from "next/navigation";
import { ArrowUpRight } from "lucide-react";
interface CalendarPostCardProps {
@@ -13,18 +14,29 @@ interface CalendarPostCardProps {
}
export function CalendarPostCard({
+ id,
imageUrl,
description,
platformStatuses = [],
onClick,
}: CalendarPostCardProps) {
+ const router = useRouter();
+
+ const handleClick = () => {
+ if (onClick) {
+ onClick();
+ } else {
+ router.push(`/history/${id}`);
+ }
+ };
+
return (
{/* Post Image */}
-
+
{imageUrl ? (
) : (
@@ -49,23 +61,23 @@ export function CalendarPostCard({
{/* Post Details */}
-
+
-
+
{description}
-
-
-
+
+
+
posted
-
+
{platformStatuses.map((p, idx) => (
-
+
+
{isSameDay(selectedDate, new Date())
? "Today's Content"
: format(selectedDate, "MMMM do")}
@@ -380,7 +380,7 @@ export default function CalendarComponent() {
{isSameDay(selectedDate, new Date()) ? "Today's Content" : format(selectedDate, "MMMM do")} @@ -380,7 +380,7 @@ export default function CalendarComponent() {
+
{description}