Dev branch

2025-11-02 12:31:01 +01:00
parent 5f879c9436
commit 63e0958b66
241 changed files with 17686 additions and 7327 deletions
@@ -0,0 +1,124 @@
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { computed } from 'vue';
+
+const props = defineProps({
+  icon: {
+    type: [String, Object, Array],
+    default: null,
+  },
+  title: {
+    type: String,
+    default: 'Ni podatkov',
+  },
+  description: {
+    type: String,
+    default: null,
+  },
+  action: {
+    type: Object,
+    default: null,
+  },
+  size: {
+    type: String,
+    default: 'md', // sm, md, lg
+    validator: (value) => ['sm', 'md', 'lg'].includes(value),
+  },
+});
+
+const sizeClasses = computed(() => {
+  const sizes = {
+    sm: {
+      icon: 'text-4xl',
+      title: 'text-base',
+      description: 'text-sm',
+      container: 'py-8',
+    },
+    md: {
+      icon: 'text-5xl',
+      title: 'text-lg',
+      description: 'text-sm',
+      container: 'py-12',
+    },
+    lg: {
+      icon: 'text-6xl',
+      title: 'text-xl',
+      description: 'text-base',
+      container: 'py-16',
+    },
+  };
+  return sizes[props.size];
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-center justify-center text-center"
+    :class="sizeClasses.container"
+  >
+    <!-- Icon -->
+    <div
+      v-if="icon"
+      class="mb-4 text-gray-400"
+      :class="sizeClasses.icon"
+    >
+      <FontAwesomeIcon :icon="icon" />
+    </div>
+    <!-- Default icon if none provided -->
+    <div
+      v-else
+      class="mb-4 text-gray-400"
+      :class="sizeClasses.icon"
+    >
+      <svg
+        class="mx-auto"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+          d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+        />
+      </svg>
+    </div>
+
+    <!-- Title -->
+    <h3
+      class="font-medium text-gray-900 mb-2"
+      :class="sizeClasses.title"
+    >
+      {{ title }}
+    </h3>
+
+    <!-- Description -->
+    <p
+      v-if="description"
+      class="text-gray-500 max-w-sm mb-6"
+      :class="sizeClasses.description"
+    >
+      {{ description }}
+    </p>
+
+    <!-- Action button -->
+    <div v-if="action">
+      <component
+        :is="action.to ? 'Link' : 'button'"
+        :href="action.to"
+        @click="action.onClick"
+        class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors"
+      >
+        <FontAwesomeIcon
+          v-if="action.icon"
+          :icon="action.icon"
+          class="w-4 h-4"
+        />
+        {{ action.label }}
+      </component>
+    </div>
+  </div>
+</template>
+
+