File size: 2,729 Bytes
59bd45e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | import React from 'react';
import { InspirationItem } from '../types';
interface InspirationCardProps {
item: InspirationItem;
index: number;
}
export const InspirationCard: React.FC<InspirationCardProps> = ({ item, index }) => {
// Format time (e.g., "10:42 AM" or "Jan 17 · Evening")
const formatTime = (timestamp: number) => {
const date = new Date(timestamp);
const now = new Date();
const isToday = date.toDateString() === now.toDateString();
if (isToday) {
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
} else {
const monthDay = date.toLocaleDateString([], { month: 'short', day: 'numeric' });
// Simple logic to approximate time of day for "companion" feel
const hour = date.getHours();
let timeOfDay = 'Day';
if (hour < 12) timeOfDay = 'Morning';
else if (hour < 18) timeOfDay = 'Afternoon';
else timeOfDay = 'Evening';
return `${monthDay} · ${timeOfDay}`;
}
};
return (
<div
className="group relative w-full bg-white/40 backdrop-blur-xl border border-white/50 shadow-[0_4px_24px_-8px_rgba(0,0,0,0.02)] rounded-[24px] p-6 mb-5 transition-all duration-700 hover:bg-white/50 active:scale-[0.99]"
style={{
animation: `fadeSlideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards`,
animationDelay: `${index * 100}ms`,
opacity: 0
}}
>
{/* Inner Highlight */}
<div className="absolute inset-0 rounded-[24px] ring-1 ring-inset ring-white/40 pointer-events-none" />
{/* Content */}
<div className="relative z-10 mb-4">
<p className="text-[16px] leading-relaxed font-normal text-slate-800/80 font-sans whitespace-pre-wrap">
{item.content}
</p>
</div>
{/* Footer: Tags + Time */}
<div className="relative z-10 flex items-end justify-between mt-2">
{/* Tags */}
<div className="flex flex-wrap gap-2 max-w-[70%]">
{item.tags?.map((tag, i) => (
<span
key={i}
className="px-2.5 py-1 rounded-full bg-white/30 border border-white/40 text-[11px] font-medium text-slate-500/70 tracking-wide backdrop-blur-sm"
>
#{tag}
</span>
))}
</div>
{/* Timestamp */}
<span className="text-[12px] font-light text-slate-400/40 tracking-wider ml-2 whitespace-nowrap">
{formatTime(item.createdAt)}
</span>
</div>
<style>{`
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
`}</style>
</div>
);
}; |