chore: transfer repo

components/products/ProductComponents/FilterButton.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+interface FilterButtonProps {
+  onClick: () => void;
+  filterText?: string;
+}
+
+export function FilterButton({ onClick, filterText = "Filteri" }: FilterButtonProps) {
+  return (
+    <button 
+      onClick={onClick} 
+      className="border border-gray-300 px-4 py-2 rounded-md flex items-center"
+    >
+      <svg 
+        className="w-4 h-4 mr-2" 
+        fill="none" 
+        stroke="currentColor" 
+        viewBox="0 0 24 24"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4h18M3 12h18M3 20h18" />
+      </svg>
+      <span>{filterText}</span>
+    </button>
+  );
+} 

components/products/ProductComponents/FilterTagList.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+interface FilterTagListProps {
+  filters: string[];
+  formatTag: (filter: string) => string;
+  onRemove: (filter: string) => void;
+  onClearAll: () => void;
+  clearAllText?: string;
+}
+
+export function FilterTagList({ 
+  filters, 
+  formatTag, 
+  onRemove, 
+  onClearAll,
+  clearAllText = "Očisti sve"
+}: FilterTagListProps) {
+  if (!filters || filters.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {filters.map((filter) => (
+        <div 
+          key={filter} 
+          className="bg-gray-100 text-sm py-1 px-3 rounded-full flex items-center"
+        >
+          <span>{formatTag(filter)}</span>
+          <button 
+            onClick={() => onRemove(filter)}
+            className="ml-2 text-gray-500 hover:text-gray-700"
+          >
+            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+              <path 
+                fillRule="evenodd" 
+                d="M10 8.586l3.293-3.293a1 1 0 111.414 1.414L11.414 10l3.293 3.293a1 1 0 01-1.414 1.414L10 11.414l-3.293 3.293a1 1 0 01-1.414-1.414L8.586 10 5.293 6.707a1 1 0 011.414-1.414L10 8.586z" 
+                clipRule="evenodd" 
+              />
+            </svg>
+          </button>
+        </div>
+      ))}
+      <button
+        onClick={onClearAll}
+        className="text-primary text-sm font-medium hover:underline"
+      >
+        {clearAllText}
+      </button>
+    </div>
+  );
+} 

components/products/ProductComponents/ProductCounter.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+interface ProductCounterProps {
+  count: number;
+}
+
+export function ProductCounter({ count }: ProductCounterProps) {
+  return (
+    <p className="text-sm text-gray-500">
+      Prikazuje se {count} proizvoda
+    </p>
+  );
+} 

components/products/ProductComponents/ProductsList.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { getProductColors } from "@/components/products/utils/colorUtils";
+import { ProductCard } from "@/components/ui/ProductCard";
+import { Product } from "lib/shopify/types";
+
+interface ProductsListProps {
+  products: Product[];
+}
+
+export function ProductsList({ products }: ProductsListProps) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-6 mb-12">
+      {products.map((product) => (
+        <div key={product.id} className="h-full">
+          <ProductCard 
+            title={product.title}
+            variant={product.variants[0]?.title || ""}
+            price={parseFloat(product.priceRange.maxVariantPrice.amount)}
+            imageSrc={product.featuredImage?.url || "/assets/images/placeholder_image.svg"}
+            slug={product.handle}
+            product={product}
+            colors={getProductColors(product)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+} 

components/products/ProductComponents/SortDropdown.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+interface SortDropdownProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function SortDropdown({ value, onChange }: SortDropdownProps) {
+  return (
+    <div>
+      <select 
+        className="border border-gray-300 px-4 py-2 rounded-md"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      >
+        <option value="default">Poredaj po</option>
+        <option value="newest">Najnovije</option>
+        <option value="price-asc">Cijena: Od niže prema višoj</option>
+        <option value="price-desc">Cijena: Od više prema nižoj</option>
+        <option value="name-asc">Naziv: A-Z</option>
+        <option value="name-desc">Naziv: Z-A</option>
+      </select>
+    </div>
+  );
+}