+
+
+
+ INGEN TREFF
+
+
+
+ Ingen produkter funnet
+
+
+
+ Vi fant ingen produkter for «{searchTerm}»
+ {storeDescription} med de valgte filtrene.
+
+
+ {visibleAlternatives.length > 0 && (
+
+
+ Prøv en annen butikkjede
+
+
+
+ Søket gir treff hos disse butikkene:
+
+
+
+ {visibleAlternatives.map((store) => (
+
+ ))}
+
+
+ )}
+
+ {hasActiveFilters && (
+
+ )}
+
+ {!hasActiveFilters && (
+
+ Prøv et annet søkeord eller en kortere
+ søkefrase.
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/SearchResults/SearchInput.tsx b/frontend/src/pages/SearchResults/SearchInput.tsx
new file mode 100644
index 0000000..2fa680a
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchInput.tsx
@@ -0,0 +1,39 @@
+
+import { useEffect, useState } from "react";
+import "../../components/searchfield/Searchfield.css";
+
+type SearchInputProps = {
+ value: string;
+ onSearchChange: (value: string) => void;
+};
+
+export default function SearchInput({
+ value,
+ onSearchChange,
+}: SearchInputProps) {
+ const [inputValue, setInputValue] = useState(value);
+
+ useEffect(() => {
+ const timeout = window.setTimeout(() => {
+ onSearchChange(inputValue.trim());
+ }, 350);
+
+ return () => window.clearTimeout(timeout);
+ }, [inputValue, onSearchChange]);
+
+ return (
+
+
+
+ setInputValue(event.target.value)}
+ placeholder="Søk etter matvarer..."
+ aria-label="Søk etter matvarer"
+ />
+
+ );
+}
+
diff --git a/frontend/src/pages/SearchResults/SearchPagination.tsx b/frontend/src/pages/SearchResults/SearchPagination.tsx
new file mode 100644
index 0000000..c28b03c
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchPagination.tsx
@@ -0,0 +1,76 @@
+
+type SearchPaginationProps = {
+ currentPage: number;
+ totalPages: number;
+ onPageChange: (page: number) => void;
+};
+
+export default function SearchPagination({
+ currentPage,
+ totalPages,
+ onPageChange,
+}: SearchPaginationProps) {
+ if (totalPages <= 1) {
+ return null;
+ }
+
+ const pages = Array.from(
+ new Set([
+ 1,
+ 2,
+ currentPage - 1,
+ currentPage,
+ currentPage + 1,
+ totalPages,
+ ]),
+ )
+ .filter((page) => page >= 1 && page <= totalPages)
+ .sort((a, b) => a - b);
+
+ return (
+
+ );
+}
diff --git a/frontend/src/pages/SearchResults/SearchProductList.tsx b/frontend/src/pages/SearchResults/SearchProductList.tsx
new file mode 100644
index 0000000..5814869
--- /dev/null
+++ b/frontend/src/pages/SearchResults/SearchProductList.tsx
@@ -0,0 +1,131 @@
+
+import type {
+ SearchProduct,
+ ProductPrice,
+} from "./searchTypes";
+
+type SearchProductListProps = {
+ products: SearchProduct[];
+ selectedStores?: string[];
+ startIndex?: number;
+ onAddProduct?: (product: SearchProduct) => void;
+};
+
+const formatter = new Intl.NumberFormat("nb-NO", {
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+});
+
+const storeNames: Record = {
+ KIWI: "Kiwi",
+ MENY_NO: "Meny",
+ SPAR_NO: "Spar",
+ BUNNPRIS: "Bunnpris",
+ COOP_NO: "Coop",
+ JOKER_NO: "Joker",
+ ODA_NO: "Oda",
+ EUROPRIS_NO: "Europris",
+ ENGROSSNETT_NO: "Engrosnett",
+};
+
+function getDisplayPrice(
+ prices: ProductPrice[],
+ selectedStores: string[],
+): ProductPrice | null {
+ const availablePrices =
+ selectedStores.length === 0
+ ? prices
+ : prices.filter((price) =>
+ selectedStores.includes(price.storeCode),
+ );
+
+ if (availablePrices.length === 0) {
+ return null;
+ }
+
+ return availablePrices.reduce((lowest, current) =>
+ current.price < lowest.price ? current : lowest,
+ );
+}
+
+export default function SearchProductList({
+ products,
+ selectedStores = [],
+ startIndex = 0,
+ onAddProduct,
+}: SearchProductListProps) {
+ return (
+
+
+ #
+ Vare
+ Kr/kg
+ Pris
+
+
+
+
+ {products.map((product, index) => {
+ const displayPrice = getDisplayPrice(
+ product.prices,
+ selectedStores,
+ );
+
+ return (
+ -
+
+ {String(
+ startIndex + index + 1,
+ ).padStart(3, "0")}
+
+
+
+ {product.name}
+ {product.brand && (
+
+ {product.brand}
+
+ )}
+
+
+
+ {displayPrice?.unitPrice != null
+ ? formatter.format(displayPrice.unitPrice)
+ : "—"}
+
+
+
+ {displayPrice
+ ? formatter.format(displayPrice.price)
+ : "Pris mangler"}
+
+ {displayPrice && (
+
+ {storeNames[displayPrice.storeCode] ??
+ displayPrice.storeCode}
+
+ )}
+
+
+
+
+ );
+ })}
+
+
- ) : ( - - )} -
- {product.name} - {product.brand &&-{product.brand}} -- {price !== null - ? `Fra ${price.toFixed(2)} kr` - : "Pris mangler"} --
- );
- })}
-