60 lines
3.3 KiB
TypeScript
60 lines
3.3 KiB
TypeScript
import { PawPrint, ExternalLink } from 'lucide-react';
|
|
|
|
export const HistoryView = ({ onBack }: { onBack: () => void }) => (
|
|
<div className="max-w-4xl mx-auto px-4 py-6 sm:p-6 sm:pt-10">
|
|
{/* Przycisk powrotu - mniejszy margines na mobile */}
|
|
<button
|
|
onClick={onBack}
|
|
className="mb-6 sm:mb-8 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-transform text-sm sm:text-base"
|
|
>
|
|
<PawPrint size={18} /> Back to KittyURL
|
|
</button>
|
|
|
|
<div className="bg-white/80 backdrop-blur-md rounded-[2rem] sm:rounded-[2.5rem] p-5 sm:p-8 shadow-xl border-2 border-pink-50">
|
|
<h2 className="text-2xl sm:text-3xl font-black text-slate-800 mb-6 sm:mb-8 flex items-center gap-2">
|
|
Recent Paws <span className="text-xl sm:text-2xl">🐾</span>
|
|
</h2>
|
|
|
|
<div className="overflow-hidden rounded-2xl border border-pink-100">
|
|
{/* Widok Tabeli (widoczny od ekranów 'sm') */}
|
|
<table className="w-full text-left bg-white hidden sm:table">
|
|
<thead className="bg-pink-50 text-pink-600">
|
|
<tr>
|
|
<th className="px-6 py-4 font-bold uppercase text-xs">Long URL</th>
|
|
<th className="px-6 py-4 font-bold uppercase text-xs">Kitty URL</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-pink-50">
|
|
<tr className="hover:bg-pink-50/50 transition-colors">
|
|
<td className="px-6 py-4 text-slate-400 truncate max-w-[300px]">
|
|
https://very-long-link.com/cats/are/the/best/animals/in/the/world
|
|
</td>
|
|
<td className="px-6 py-4">
|
|
<a href="#" className="font-bold text-pink-500 flex items-center gap-2 hover:underline">
|
|
kitty.url/meow <ExternalLink size={14} />
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
{/* Widok Mobilny (Lista kart zamiast tabeli - widoczny tylko na małych ekranach) */}
|
|
<div className="sm:hidden divide-y divide-pink-50 bg-white">
|
|
<div className="p-4 space-y-2">
|
|
<div className="text-[10px] font-bold text-pink-400 uppercase tracking-wider">Long URL</div>
|
|
<div className="text-slate-500 text-sm truncate">
|
|
https://very-long-link.com/cats/are/the/best/animals/in/the/world
|
|
</div>
|
|
<div className="pt-2">
|
|
<div className="text-[10px] font-bold text-pink-400 uppercase tracking-wider mb-1">Kitty URL</div>
|
|
<a href="#" className="font-bold text-pink-500 flex items-center gap-1 text-sm">
|
|
kitty.url/meow <ExternalLink size={14} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/* Tutaj możesz mapować kolejne wpisy historii tak samo jak wyżej */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
); |