"use client"
import { BASE_URL } from "@/constants"
import type { Icon, IconWithName } from "@/types/icons"
import { format, isToday, isYesterday } from "date-fns"
import { motion, useInView } from "framer-motion"
import { ArrowRight, Clock, ExternalLink } from "lucide-react"
import { useTheme } from "next-themes"
import Image from "next/image"
import Link from "next/link"
import { useRef } from "react"
function formatIconDate(timestamp: string): string {
const date = new Date(timestamp)
if (isToday(date)) {
return "Today"
}
if (isYesterday(date)) {
return "Yesterday"
}
return format(date, "MMM d, yyyy")
}
export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
const { resolvedTheme } = useTheme()
// Helper function to get the appropriate icon variant based on theme
const getIconVariant = (name: string, data: Icon) => {
// Check if the icon has theme variants and use appropriate one
if (data.colors) {
// If in dark mode and a light variant exists, use the light variant
if (resolvedTheme === "dark" && data.colors.light) {
return data.colors.light
}
// If in light mode and a dark variant exists, use the dark variant
if (resolvedTheme === "light" && data.colors.dark) {
return data.colors.dark
}
}
// Fall back to the default name if no appropriate variant
return name
}
return (