From 13adcf89ff87358e0c216be1434962385e44bc50 Mon Sep 17 00:00:00 2001
From: zealves99 <a27967@alunos.ipca.pt>
Date: Thu, 29 May 2025 18:50:54 +0100
Subject: [PATCH] feat: home page translations

Added translations for the home page
---
 .../app/dashboard/layout/favorites-page.tsx   |   2 +-
 .../marketplace/filters-section.tsx           | 162 +++++++++++-------
 .../components/marketplace/marketplace.tsx    |  34 ++--
 .../components/marketplace/search-bar.tsx     |  39 +++--
 frontend/vizzy/messages/en.json               |  24 +++
 frontend/vizzy/messages/pt.json               |  24 +++
 6 files changed, 192 insertions(+), 93 deletions(-)

diff --git a/frontend/vizzy/app/dashboard/layout/favorites-page.tsx b/frontend/vizzy/app/dashboard/layout/favorites-page.tsx
index a9d0ae96..b1e2d23e 100644
--- a/frontend/vizzy/app/dashboard/layout/favorites-page.tsx
+++ b/frontend/vizzy/app/dashboard/layout/favorites-page.tsx
@@ -10,7 +10,7 @@ import { PaginationControls } from '@/components/marketplace/pagination-controls
 import { useTranslations } from 'next-intl';
 
 export function FavoritesPage() {
-  const t = useTranslations('favoritesPage');
+  const t = useTranslations('dashboard.favoritesPage');
   const [favorites, setFavorites] = useState<ListingBasic[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
diff --git a/frontend/vizzy/components/marketplace/filters-section.tsx b/frontend/vizzy/components/marketplace/filters-section.tsx
index 47c0ef1f..2a10cdf5 100644
--- a/frontend/vizzy/components/marketplace/filters-section.tsx
+++ b/frontend/vizzy/components/marketplace/filters-section.tsx
@@ -1,27 +1,33 @@
-"use client"
+'use client';
 
-import { useState } from "react"
-import { ChevronDown, ChevronUp, MapPin, SlidersHorizontal } from "lucide-react"
-import { Checkbox } from "@/components/ui/forms/checkbox"
-import { Label } from "@/components/ui/common/label"
+import { useState } from 'react';
+import {
+  ChevronDown,
+  ChevronUp,
+  MapPin,
+  SlidersHorizontal,
+} from 'lucide-react';
+import { Checkbox } from '@/components/ui/forms/checkbox';
+import { Label } from '@/components/ui/common/label';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/forms/select"
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/navigation/tabs"
-import { cn } from "@/lib/utils/shadcn-merge"
-import { Button } from "@/components/ui/common/button"  
+} from '@/components/ui/forms/select';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/navigation/tabs';
+import { cn } from '@/lib/utils/shadcn-merge';
+import { Button } from '@/components/ui/common/button';
+import { useTranslations } from 'next-intl';
 interface FiltersSectionProps {
-  listingType: string
-  handleTypeChange: (value: string) => void
-  userLocation: { lat: number; lon: number; full_address: string } | null
-  useLocation: boolean
-  handleLocationToggle: (checked: boolean) => void
-  locationDistance: string
-  handleDistanceChange: (value: string) => void
+  listingType: string;
+  handleTypeChange: (value: string) => void;
+  userLocation: { lat: number; lon: number; full_address: string } | null;
+  useLocation: boolean;
+  handleLocationToggle: (checked: boolean) => void;
+  locationDistance: string;
+  handleDistanceChange: (value: string) => void;
 }
 
 export function FiltersSection({
@@ -33,7 +39,8 @@ export function FiltersSection({
   locationDistance,
   handleDistanceChange,
 }: FiltersSectionProps) {
-  const [isExpanded, setIsExpanded] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false);
+  const t = useTranslations('marketplace');
 
   if (!userLocation) {
     return null;
@@ -51,18 +58,31 @@ export function FiltersSection({
             onClick={() => setIsExpanded(!isExpanded)}
           >
             <SlidersHorizontal className="h-4 w-4" />
-            Filters
-            {isExpanded ? <ChevronUp className="h-3 w-3 ml-1" /> : <ChevronDown className="h-3 w-3 ml-1" />}
+            {t('filters.title')}
+            {isExpanded ? (
+              <ChevronUp className="h-3 w-3 ml-1" />
+            ) : (
+              <ChevronDown className="h-3 w-3 ml-1" />
+            )}
           </Button>
 
           <div className="flex-1 min-w-[200px]">
-            <Tabs defaultValue={listingType} className="w-full" onValueChange={handleTypeChange} value={listingType}>
+            <Tabs
+              defaultValue={listingType}
+              className="w-full"
+              onValueChange={handleTypeChange}
+              value={listingType}
+            >
               <TabsList className="grid grid-cols-5 h-9">
-                <TabsTrigger value="all">All</TabsTrigger>
-                <TabsTrigger value="sale">Sale</TabsTrigger>
-                <TabsTrigger value="swap">Swap</TabsTrigger>
-                <TabsTrigger value="rental">Rental</TabsTrigger>
-                <TabsTrigger value="giveaway">Free</TabsTrigger>
+                <TabsTrigger value="all">{t('filterBadge.all')}</TabsTrigger>
+                <TabsTrigger value="sale">{t('filterBadge.sale')}</TabsTrigger>
+                <TabsTrigger value="swap">{t('filterBadge.swap')}</TabsTrigger>
+                <TabsTrigger value="rental">
+                  {t('filterBadge.rental')}
+                </TabsTrigger>
+                <TabsTrigger value="giveaway">
+                  {t('filterBadge.giveaway')}
+                </TabsTrigger>
               </TabsList>
             </Tabs>
           </div>
@@ -71,56 +91,68 @@ export function FiltersSection({
         {/* Expanded Filters */}
         <div
           className={cn(
-            "grid gap-4 transition-all duration-200 overflow-hidden",
-            isExpanded ? "grid-rows-[1fr] opacity-100 max-h-[500px]" : "grid-rows-[0fr] opacity-0 max-h-0",
+            'grid gap-4 transition-all duration-200 overflow-hidden',
+            isExpanded
+              ? 'grid-rows-[1fr] opacity-100 max-h-[500px]'
+              : 'grid-rows-[0fr] opacity-0 max-h-0',
           )}
         >
           <div className="overflow-hidden">
             <div className="bg-card rounded-lg p-4 shadow-sm border border-border/40">
               {/* Location Filter */}
-              
-                <div className="space-y-3">
-                  <h3 className="text-sm font-medium">Location</h3>
-                  <div className="flex items-start gap-2">
-                    <Checkbox
-                      id="use-location"
-                      checked={useLocation}
-                      onCheckedChange={handleLocationToggle}
-                      className="mt-1"
-                    />
-                    <div>
-                      <Label htmlFor="use-location" className="font-medium cursor-pointer">
-                        Show listings near me
-                      </Label>
-                      <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
-                        <MapPin className="h-3 w-3" />
-                        {userLocation.full_address}
-                      </p>
-                    </div>
-                  </div>
 
-                  {useLocation && (
-                    <div className="mt-2">
-                      <label className="text-xs font-medium mb-1 block">Distance</label>
-                      <Select value={locationDistance} onValueChange={handleDistanceChange}>
-                        <SelectTrigger className="w-full h-9">
-                          <SelectValue placeholder="Select distance" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="1000">1 km</SelectItem>
-                          <SelectItem value="5000">5 km</SelectItem>
-                          <SelectItem value="10000">10 km</SelectItem>
-                          <SelectItem value="25000">25 km</SelectItem>
-                          <SelectItem value="50000">50 km</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  )}
+              <div className="space-y-3">
+                <h3 className="text-sm font-medium">{t('filters.location')}</h3>
+                <div className="flex items-start gap-2">
+                  <Checkbox
+                    id="use-location"
+                    checked={useLocation}
+                    onCheckedChange={handleLocationToggle}
+                    className="mt-1"
+                  />
+                  <div>
+                    <Label
+                      htmlFor="use-location"
+                      className="font-medium cursor-pointer"
+                    >
+                      {t('filters.locationToggle')}
+                    </Label>
+                    <p className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
+                      <MapPin className="h-3 w-3" />
+                      {userLocation.full_address}
+                    </p>
+                  </div>
                 </div>
+
+                {useLocation && (
+                  <div className="mt-2">
+                    <label className="text-xs font-medium mb-1 block">
+                      {t('filters.distance')}
+                    </label>
+                    <Select
+                      value={locationDistance}
+                      onValueChange={handleDistanceChange}
+                    >
+                      <SelectTrigger className="w-full h-9">
+                        <SelectValue
+                          placeholder={t('filters.distancePlaceholder')}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="1000">1 km</SelectItem>
+                        <SelectItem value="5000">5 km</SelectItem>
+                        <SelectItem value="10000">10 km</SelectItem>
+                        <SelectItem value="25000">25 km</SelectItem>
+                        <SelectItem value="50000">50 km</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/frontend/vizzy/components/marketplace/marketplace.tsx b/frontend/vizzy/components/marketplace/marketplace.tsx
index 1e4e6091..d2c30e72 100644
--- a/frontend/vizzy/components/marketplace/marketplace.tsx
+++ b/frontend/vizzy/components/marketplace/marketplace.tsx
@@ -1,10 +1,11 @@
-"use client"
+'use client';
 
-import { useListings } from "@/hooks/use-listings"
-import { SearchBar } from "./search-bar"
-import { FiltersSection } from "./filters-section"
-import { ListingsGrid } from "./listings-grid"
-import { PaginationControls } from "./pagination-controls"
+import { useListings } from '@/hooks/use-listings';
+import { SearchBar } from './search-bar';
+import { FiltersSection } from './filters-section';
+import { ListingsGrid } from './listings-grid';
+import { PaginationControls } from './pagination-controls';
+import { useTranslations } from 'next-intl';
 
 export default function Marketplace() {
   const {
@@ -23,16 +24,21 @@ export default function Marketplace() {
     handleTypeChange,
     handleLocationToggle,
     handleDistanceChange,
-  } = useListings()
+  } = useListings();
+  const t = useTranslations('marketplace');
 
   return (
     <div className="container mx-auto xl:px-14 px-4 py-8">
       <section className="mb-10">
-        <h1 className="text-3xl font-bold mb-6">Find what you need</h1>
+        <h1 className="text-3xl font-bold mb-6">{t('title')}</h1>
 
         <div className="space-y-4">
           {/* Search Bar */}
-          <SearchBar searchInput={searchInput} setSearchInput={setSearchInput} handleSearch={handleSearch} />
+          <SearchBar
+            searchInput={searchInput}
+            setSearchInput={setSearchInput}
+            handleSearch={handleSearch}
+          />
 
           {/* Filters Section */}
           <FiltersSection
@@ -50,14 +56,18 @@ export default function Marketplace() {
       {/* Results Section */}
       <section>
         <div className="flex justify-between items-center mb-6">
-          <h2 className="text-2xl font-bold">Latest Listings</h2>
+          <h2 className="text-2xl font-bold">{t('latestListings')}</h2>
         </div>
 
         <ListingsGrid listings={listings} loading={loading} />
 
         {/* Pagination */}
-        <PaginationControls page={page} totalPages={totalPages} handlePageChange={handlePageChange} />
+        <PaginationControls
+          page={page}
+          totalPages={totalPages}
+          handlePageChange={handlePageChange}
+        />
       </section>
     </div>
-  )
+  );
 }
diff --git a/frontend/vizzy/components/marketplace/search-bar.tsx b/frontend/vizzy/components/marketplace/search-bar.tsx
index a6e0c641..d53fe05b 100644
--- a/frontend/vizzy/components/marketplace/search-bar.tsx
+++ b/frontend/vizzy/components/marketplace/search-bar.tsx
@@ -1,40 +1,49 @@
-"use client"
-
-import { Search, X } from "lucide-react"
-import { Button } from "@/components/ui/common/button"
-import { Input } from "@/components/ui/forms/input"
+'use client';
 
+import { Search, X } from 'lucide-react';
+import { Button } from '@/components/ui/common/button';
+import { Input } from '@/components/ui/forms/input';
+import { useTranslations } from 'next-intl';
 interface SearchBarProps {
-  searchInput: string
-  setSearchInput: (value: string) => void
-  handleSearch: () => void
+  searchInput: string;
+  setSearchInput: (value: string) => void;
+  handleSearch: () => void;
 }
 
-export function SearchBar({ searchInput, setSearchInput, handleSearch }: SearchBarProps) {
+export function SearchBar({
+  searchInput,
+  setSearchInput,
+  handleSearch,
+}: SearchBarProps) {
+  const t = useTranslations('marketplace');
   return (
     <div className="relative w-full">
       <div className="relative">
         <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
         <Input
-          placeholder="Search for items..."
+          placeholder={t('searchPlaceholder')}
           className="pl-10 pr-20 h-12 rounded-lg border-border/40 focus-visible:ring-primary focus-visible:border-primary"
           value={searchInput}
           onChange={(e) => setSearchInput(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && handleSearch()}
+          onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
         />
         {searchInput && (
           <button
-            onClick={() => setSearchInput("")}
+            onClick={() => setSearchInput('')}
             className="absolute right-[70px] top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
             aria-label="Clear search"
           >
             <X className="h-4 w-4" />
           </button>
         )}
-        <Button className="absolute right-1 top-1/2 transform -translate-y-1/2 h-10" onClick={handleSearch} size="sm">
-          Search
+        <Button
+          className="absolute right-1 top-1/2 transform -translate-y-1/2 h-10"
+          onClick={handleSearch}
+          size="sm"
+        >
+          {t('searchButton')}
         </Button>
       </div>
     </div>
-  )
+  );
 }
diff --git a/frontend/vizzy/messages/en.json b/frontend/vizzy/messages/en.json
index e8f46cd4..920d5a08 100644
--- a/frontend/vizzy/messages/en.json
+++ b/frontend/vizzy/messages/en.json
@@ -391,5 +391,29 @@
         "description": "Mark listings as favorites to see them here."
       }
     }
+  },
+  "marketplace": {
+    "title": "Find what you need",
+    "latestListings": "Latest Listings",
+    "searchPlaceholder": "Search for items...",
+    "searchButton": "Search",
+    "noResults": "No results found",
+    "noResultsDescription": "Try different filters or search for something else.",
+    "seeAll": "See all",
+    "filters": {
+      "title": "Filters",
+      "clear": "Clear Filters",
+      "location": "Location",
+      "locationToggle": "Show listings near me",
+      "distance": "Distance",
+      "distancePlaceholder": "Select maximum distance"
+    },
+    "filterBadge": {
+      "sale": "Sale",
+      "swap": "Swap",
+      "rental": "Rental",
+      "giveaway": "Free",
+      "all": "All"
+    }
   }
 }
diff --git a/frontend/vizzy/messages/pt.json b/frontend/vizzy/messages/pt.json
index cc1dc2f8..93020134 100644
--- a/frontend/vizzy/messages/pt.json
+++ b/frontend/vizzy/messages/pt.json
@@ -394,5 +394,29 @@
         "description": "Marque anúncios como favoritos para vê-los aqui."
       }
     }
+  },
+  "marketplace": {
+    "title": "Encontra o que precisas",
+    "latestListings": "Anúncios Recentes",
+    "searchPlaceholder": "Pesquisa por itens...",
+    "searchButton": "Pesquisar",
+    "noResults": "Nenhum resultado encontrado",
+    "noResultsDescription": "Tente diferentes filtros ou procure por algo diferente.",
+    "seeAll": "Ver todos",
+    "filters": {
+      "title": "Filtros",
+      "clear": "Limpar Filtros",
+      "location": "Localização",
+      "locationToggle": "Mostrar anúncios perto de mim",
+      "distance": "Distância",
+      "distancePlaceholder": "Seleciona a distância máxima"
+    },
+    "filterBadge": {
+      "sale": "Venda",
+      "swap": "Troca",
+      "rental": "Aluguer",
+      "giveaway": "Oferta",
+      "all": "Todos"
+    }
   }
 }