feat (v1.0.0): initial refactor and redesign

This commit is contained in:
Aidan 2025-10-09 04:12:05 -04:00
parent 3058aa1ab4
commit fe9b50b30e
134 changed files with 17792 additions and 3670 deletions

View file

@ -0,0 +1,88 @@
import { getRenewalTimeline, formatDate, getNextRenewalDate } from '@/lib/domains/utils'
import { Calendar, RefreshCw, Star } from 'lucide-react'
import type { DomainTimelineProps } from '@/lib/types'
export default function DomainTimeline({ domain }: DomainTimelineProps) {
const timeline = getRenewalTimeline(domain)
const nextRenewalDate = getNextRenewalDate(domain)
return (
<div className="bg-gray-900/50 backdrop-blur-sm border border-gray-800 rounded-xl p-6">
<div className="relative">
<div className="absolute left-6 top-8 bottom-0 w-0.5 bg-gray-700"></div>
<div className="space-y-8">
{timeline.map((event, index) => {
const isLatest = index === timeline.length - 1
const isRegistration = event.type === 'registration'
return (
<div key={index} className="relative flex items-start gap-4">
<div className={`relative z-10 flex items-center justify-center w-12 h-12 rounded-full ${
isRegistration || isLatest
? 'bg-gray-800 border-2 border-slate-400/50'
: 'bg-gray-800 border-2 border-gray-700'
}`}>
{isRegistration ? (
<Star className="w-6 h-6 text-slate-300" />
) : (
<RefreshCw className={`w-5 h-5 ${isLatest ? 'text-slate-300' : 'text-gray-500'}`} />
)}
</div>
<div className="flex-1 pb-8">
<div className={`rounded-lg p-4 border transition-colors ${
isRegistration || isLatest
? 'bg-gray-800/50 border-gray-700/50 hover:border-gray-600/50'
: 'bg-slate-400/5 border-slate-400/20 hover:border-slate-400/30'
}`}>
<div className="flex items-center justify-between mb-2">
<span className={`text-sm font-medium ${
isRegistration || isLatest ? 'text-slate-300' : 'text-gray-400'
}`}>
{isRegistration ? 'Domain Registered' : 'Domain Renewed'}
</span>
<div className="flex items-center gap-2 text-xs text-gray-500">
<Calendar className="w-3 h-3" />
{formatDate(event.date)}
</div>
</div>
<div className="text-sm text-gray-300">
{isRegistration ? (
<span>Initial registration for {event.years} {event.years === 1 ? 'year' : 'years'}</span>
) : (
<span>Renewed for {event.years} {event.years === 1 ? 'year' : 'years'}</span>
)}
</div>
</div>
</div>
</div>
)
})}
<div className="relative flex items-start gap-4">
<div className="relative z-10 flex items-center justify-center w-12 h-12 rounded-full bg-gray-900 border-2 border-dashed border-gray-700">
<Calendar className="w-5 h-5 text-gray-600" />
</div>
<div className="flex-1">
<div className="bg-gray-900/30 rounded-lg p-4 border border-dashed border-gray-700/50">
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-gray-500">
Next Renewal
</span>
<div className="flex items-center gap-2 text-xs text-gray-500">
<Calendar className="w-3 h-3" />
{formatDate(nextRenewalDate)}
</div>
</div>
<div className="text-xs text-gray-600">
{domain.autoRenew ? 'Auto-renewal enabled' : 'Manual renewal required'}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}