114 lines
3.6 KiB
Plaintext
114 lines
3.6 KiB
Plaintext
---
|
|
// src/components/GenericKarticaItem.astro
|
|
import { getStatusColorClass } from "../utils/ui";
|
|
|
|
interface Props {
|
|
href: string;
|
|
status: string;
|
|
statusBojaClass?: string;
|
|
ikona: string;
|
|
naslov: string;
|
|
subNaslov?: string;
|
|
metaTekst: string;
|
|
statusPrikaz: string;
|
|
bojaTeme?: "blue" | "indigo" | "emerald" | "red"; // Podrška za teme
|
|
}
|
|
|
|
const {
|
|
href,
|
|
status,
|
|
statusBojaClass,
|
|
ikona,
|
|
naslov,
|
|
subNaslov,
|
|
metaTekst,
|
|
statusPrikaz,
|
|
bojaTeme = "blue"
|
|
} = Astro.props;
|
|
|
|
// Mapiranje tema na Tailwind klase
|
|
const themes = {
|
|
blue: {
|
|
hover: "hover:bg-blue-50/30 dark:hover:bg-blue-900/10",
|
|
text: "group-hover:text-blue-600 dark:group-hover:text-blue-400",
|
|
iconBg: "group-hover:bg-blue-600",
|
|
arrow: "group-hover:text-blue-600"
|
|
},
|
|
indigo: {
|
|
hover: "hover:bg-indigo-50/30 dark:hover:bg-indigo-900/10",
|
|
text: "group-hover:text-indigo-600 dark:group-hover:text-indigo-400",
|
|
iconBg: "group-hover:bg-indigo-600",
|
|
arrow: "group-hover:text-indigo-600"
|
|
},
|
|
emerald: {
|
|
hover: "hover:bg-emerald-50/30 dark:hover:bg-emerald-900/10",
|
|
text: "group-hover:text-emerald-600 dark:group-hover:text-emerald-400",
|
|
iconBg: "group-hover:bg-emerald-600",
|
|
arrow: "group-hover:text-emerald-400"
|
|
}
|
|
};
|
|
|
|
const activeTheme = themes[bojaTeme] || themes.blue;
|
|
const resolvedStatusColor = statusBojaClass || getStatusColorClass(status);
|
|
---
|
|
|
|
<a
|
|
href={href}
|
|
class:list={[
|
|
"nalog-item flex items-center justify-between p-8 border-b border-gray-50 dark:border-gray-700 last:border-0 group transition-all duration-300",
|
|
activeTheme.hover
|
|
]}
|
|
data-status={status}
|
|
>
|
|
<div class="flex items-center gap-6 text-left">
|
|
<!-- Ikona s dinamičkom bojom na hoveru -->
|
|
<div class:list={[
|
|
"w-14 h-14 rounded-2xl flex items-center justify-center text-xl shadow-inner transition-all duration-300 bg-gray-50 dark:bg-gray-900 text-gray-400 group-hover:text-white",
|
|
activeTheme.iconBg
|
|
]}>
|
|
<i class:list={["fa-solid", ikona, status === 'u_radu' ? 'animate-pulse' : '']}></i>
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
<div class="flex items-center gap-3">
|
|
<span class:list={[
|
|
"font-black text-gray-900 dark:text-white text-xl uppercase tracking-tighter italic transition-colors leading-none",
|
|
activeTheme.text
|
|
]}>
|
|
{naslov}
|
|
</span>
|
|
{subNaslov && (
|
|
<span class="text-[10px] font-black bg-gray-900 text-white px-2 py-0.5 rounded border border-gray-700 uppercase tracking-[0.2em]">
|
|
{subNaslov}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<span class="text-gray-400 text-[10px] font-black uppercase tracking-widest mt-2 italic leading-none">
|
|
{metaTekst}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-8">
|
|
<!-- Status indikator desno -->
|
|
<div class="hidden lg:flex flex-col items-end text-right">
|
|
<div class="flex items-center gap-2 mb-1">
|
|
<div class:list={["w-2 h-2 rounded-full", resolvedStatusColor]}></div>
|
|
<span class="text-[8px] font-black uppercase text-gray-400 tracking-[0.2em]">Status</span>
|
|
</div>
|
|
<span class:list={[
|
|
"text-xs font-black uppercase italic transition-colors",
|
|
status === 'zavrseno' || status === 'naplaceno' || status === 'aktivan' ? 'text-emerald-500' : activeTheme.text
|
|
]}>
|
|
{statusPrikaz}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Strelica -->
|
|
<i class:list={[
|
|
"fa-solid fa-arrow-right-long text-gray-200 group-hover:translate-x-2 transition-all duration-300",
|
|
activeTheme.arrow
|
|
]}></i>
|
|
</div>
|
|
</a> |