add from v002

2026-05-20 21:24:00 +02:00
parent 1a6ba86d0b
commit 83fb8c69bb
98 changed files with 10878 additions and 0 deletions
--- a/001.FRONTEND/src/components/GenericKarticaItem.astro
+++ b/001.FRONTEND/src/components/GenericKarticaItem.astro
@@ -0,0 +1,114 @@
+---
+// 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>