kittyteam/kittyFE
3
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 5 Wiki Activity

feat: responsive desing

Browse Source 
feat: load api from .env
This commit is contained in:
Pc
2025-12-31 13:28:27 +01:00
parent 311d3d75e9
commit de9486bece
7 changed files with 168 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
kittyurl-frontend/src/components/HistoryView.tsx
View File

@@ -1,15 +1,23 @@
import { PawPrint, ExternalLink } from 'lucide-react';
import { PawPrint, ExternalLink } from 'lucide-react';
export const HistoryView = ({ onBack }: { onBack: () => void }) => (
<div className="max-w-4xl mx-auto p-6 pt-10">
<button onClick={onBack} className="mb-8 flex items-center gap-2 text-pink-500 font-bold hover:scale-105 transition-transform">
<PawPrint size={20} /> Back to KittyURL
<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-[2.5rem] p-8 shadow-xl border-2 border-pink-50">
<h2 className="text-3xl font-black text-slate-800 mb-8">Recent Paws 🐾</h2>
<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">
<table className="w-full text-left bg-white">
{/* 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>
@@ -18,11 +26,34 @@ export const HistoryView = ({ onBack }: { onBack: () => void }) => (
</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-[200px]">https://very-long-link.com/cats</td>
<td className="px-6 py-4 font-bold text-pink-500 flex items-center gap-2">kitty.url/meow <ExternalLink size={14} /></td>
<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>