- 
+
{/* Back button */}
-
+
+
+
+
+
+
+
+
+
+
+
{migrant.firstName} {migrant.lastName}
- {migrant.yearOfArrival} • {migrant.regionOfOrigin}, Italy → {migrant.settlementLocation}, NT
+ {migrant.yearOfArrival} • {migrant.regionOfOrigin}, Italy →{" "}
+ {migrant.settlementLocation}, NT
-
+
+
+
+
+ {migrant.firstName} {migrant.lastName}
- {migrant.yearOfArrival} • {migrant.regionOfOrigin}, Italy → {migrant.settlementLocation}, NT + {migrant.yearOfArrival} • {migrant.regionOfOrigin}, Italy →{" "} + {migrant.settlementLocation}, NT
-
-
-
- Back to Search
-
+
+
+
(null)
-
- const openModal = (index: number) => {
- setCurrentPhotoIndex(index)
- document.body.style.overflow = "hidden"
- }
-
- const closeModal = () => {
- setCurrentPhotoIndex(null)
- document.body.style.overflow = "auto"
- }
+export default function PhotoGallery({ photos }: PhotoGalleryProps) {
+ const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
+ const [isDialogOpen, setIsDialogOpen] = useState(false);
const handlePrevious = () => {
- if (currentPhotoIndex === null) return
- setCurrentPhotoIndex((prev) => (prev === 0 ? photos.length - 1 : prev - 1))
- }
+ setCurrentPhotoIndex((prev) => (prev === 0 ? photos.length - 1 : prev - 1));
+ };
const handleNext = () => {
- if (currentPhotoIndex === null) return
- setCurrentPhotoIndex((prev) => (prev === photos.length - 1 ? 0 : prev + 1))
- }
+ setCurrentPhotoIndex((prev) => (prev === photos.length - 1 ? 0 : prev + 1));
+ };
return (
- <>
-
{/* Main content - 2/3 width on desktop */}
- )
+ );
}
-
-export default MigrantProfileComponent
diff --git a/src/components/PhotoGallery.tsx b/src/components/PhotoGallery.tsx
index 48009b1..0c5b29a 100644
--- a/src/components/PhotoGallery.tsx
+++ b/src/components/PhotoGallery.tsx
@@ -1,140 +1,132 @@
-"use client"
+"use client";
-import { useState } from "react"
-import type { Photo } from "../types/migrant"
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Card, CardContent } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import AnimatedImage from "@/components/ui/animated-image";
+import type { Photo } from "@/types/migrant";
interface PhotoGalleryProps {
- photos: Photo[]
+ photos: Photo[];
}
-const PhotoGallery = ({ photos }: PhotoGalleryProps) => {
- const [currentPhotoIndex, setCurrentPhotoIndex] = useState
{/* Biographical information */}
-
-
+
+
+
+
+
)}
{/* Photo gallery - only show if there are additional photos */}
- {migrant.photos && migrant.photos.length > 0 &&
+
+ )}
{/* Sidebar - 1/3 width on desktop */}
-
+
+
+
{/* Life story */}
{migrant.biography && (
- Biographical Information
-
-
-
-
+
+
+
- Full Name
-- {migrant.firstName} {migrant.middleName ? migrant.middleName + " " : ""} - {migrant.lastName} -
++ Biographical Information +
+ +
+
-
+
+ + Full Name +
++ {migrant.firstName}{" "} + {migrant.middleName ? migrant.middleName + " " : ""} + {migrant.lastName} +
+
+
+ + Birth Date +
++ {migrant.birthDate || "Unknown"} +
+
+
+ + Birth Place +
++ {migrant.birthPlace || "Unknown"} +
+
+
+ + Age at Migration +
+{migrant.ageAtMigration} years
+
+
+ + Year of Arrival +
+{migrant.yearOfArrival}
+
+
+ + Region of Origin +
+{migrant.regionOfOrigin}, Italy
+
+
+ + Settlement Location +
++ {migrant.settlementLocation}, NT +
+
+
+ {migrant.deathDate && (
+ <>
+ + Occupation +
++ {migrant.occupation || "Unknown"} +
+
+
+ + Date of Death +
+{migrant.deathDate}
+
+
+
+ )}
+ Place of Death +
++ {migrant.deathPlace || "Unknown"} +
+
-
- Birth Date
-{migrant.birthDate || "Unknown"}
-
-
- Birth Place
-{migrant.birthPlace || "Unknown"}
-
-
- Age at Migration
-{migrant.ageAtMigration} years
-
-
- Year of Arrival
-{migrant.yearOfArrival}
-
-
- Region of Origin
-{migrant.regionOfOrigin}, Italy
-
-
- Settlement Location
-{migrant.settlementLocation}, NT
-
-
- {migrant.deathDate && (
- <>
- Occupation
-{migrant.occupation || "Unknown"}
-
-
- Date of Death
-{migrant.deathDate}
-
-
-
- )}
- Place of Death
-{migrant.deathPlace || "Unknown"}
-
-
+
-
- Life Story
-
- {migrant.biography.split("\n").map((paragraph, index) => (
-
- - {paragraph} -
- ))} -+ La Storia di Vita +
+ +
+ {migrant.biography.split("\n").map((paragraph, index) => (
+
+ + {paragraph} +
+ ))} +
{/* Historical context */}
-
+
{/* Related migrants */}
{migrant.relatedMigrants && migrant.relatedMigrants.length > 0 && (
-
+
)}
-
-
- {/* Modal */}
- {currentPhotoIndex !== null && (
-
-
- Photo Gallery
-
- {photos.map((photo, index) => (
-
- ))}
-
-
-
-
- )}
-
- )
+
+
+ );
}
-
-export default PhotoGallery
diff --git a/src/components/RelatedMigrants.tsx b/src/components/RelatedMigrants.tsx
index 59ef2b7..a8b8c46 100644
--- a/src/components/RelatedMigrants.tsx
+++ b/src/components/RelatedMigrants.tsx
@@ -1,41 +1,57 @@
-import { Link } from "react-router-dom"
-import type { RelatedMigrant } from "../types/migrant"
+import { Link } from "react-router-dom";
+import type { RelatedMigrant } from "../types/migrant";
+import { Card, CardContent } from "./ui/card";
+import { motion } from "framer-motion";
+import AnimatedImage from "./ui/animated-image";
interface RelatedMigrantsProps {
- migrants: RelatedMigrant[]
+ migrants: RelatedMigrant[];
}
const RelatedMigrants = ({ migrants }: RelatedMigrantsProps) => {
return (
-
-
- )
-}
+
+
+ );
+};
-export default RelatedMigrants
+export default RelatedMigrants;
diff --git a/src/components/SearchForm.tsx b/src/components/SearchForm.tsx
index a0e5fbb..7301637 100644
--- a/src/components/SearchForm.tsx
+++ b/src/components/SearchForm.tsx
@@ -1,7 +1,9 @@
"use client";
import { useState, type ChangeEvent, type FormEvent } from "react";
-import type { SearchParams } from "../types/search";
+import type { SearchParams } from "@/types/search";
+import { Button } from "@/components/ui/button";
+import { Search } from "lucide-react";
// Mock data for autocomplete
const ITALIAN_REGIONS = [
@@ -192,19 +194,20 @@ const SearchForm = ({ onSearch }: SearchFormProps) => {
-
+
+
- Related Migrants
++ Migranti Correlati +
+
- {migrants.map((migrant) => (
- (
+
-
))}
-
- 
-
-
-
-
+
+ - {migrant.firstName} {migrant.lastName} -
-{migrant.relationship}
-
+
+
+
+
+ + {migrant.firstName} {migrant.lastName} +
++ {migrant.relationship} +
+
-
-
);
diff --git a/src/components/SearchResults.tsx b/src/components/SearchResults.tsx
index c284911..5894206 100644
--- a/src/components/SearchResults.tsx
+++ b/src/components/SearchResults.tsx
@@ -1,67 +1,152 @@
-import { Link } from "react-router-dom"
-import type { SearchResult } from "../types/search"
-import LoadingSpinner from "./LoadingSpinner"
+"use client";
+
+import { Link } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import type { SearchResult } from "@/types/search";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import AnimatedImage from "@/components/ui/animated-image";
interface SearchResultsProps {
- results: SearchResult[]
- isLoading: boolean
+ results: SearchResult[];
+ isLoading: boolean;
+ hasSearched?: boolean;
}
-const SearchResults = ({ results, isLoading }: SearchResultsProps) => {
+export default function SearchResults({
+ results,
+ isLoading,
+ hasSearched = false,
+}: SearchResultsProps) {
+ const container = {
+ hidden: { opacity: 0 },
+ show: {
+ opacity: 1,
+ transition: {
+ staggerChildren: 0.1,
+ },
+ },
+ };
+
+ const item = {
+ hidden: { opacity: 0, y: 20 },
+ show: { opacity: 1, y: 0, transition: { duration: 0.5 } },
+ };
+
if (isLoading) {
return (
-
-
+
+ );
}
if (results.length === 0) {
- return (
- ([])
- const [isSearching, setIsSearching] = useState(false)
- const [hasSearched, setHasSearched] = useState(false)
+ const [searchResults, setSearchResults] = useState([]);
+ const [isSearching, setIsSearching] = useState(false);
+ const [hasSearched, setHasSearched] = useState(false);
const handleSearch = async (params: SearchParams) => {
- setIsSearching(true)
+ setIsSearching(true);
try {
- const results = await searchMigrants(params)
- setSearchResults(results)
- setHasSearched(true)
+ const results = await searchMigrants(params);
+ setSearchResults(results);
+ setHasSearched(true);
} catch (error) {
- console.error("Error searching migrants:", error)
+ console.error("Error searching migrants:", error);
// In a real application, you would handle this error more gracefully
} finally {
- setIsSearching(false)
+ setIsSearching(false);
}
- }
+ };
return (
- )
-}
+ );
+};
-export default SearchSection
+export default SearchSection;
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..b7224f0
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,51 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ ) {
+ return ) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+ ) {
+ return (
+
+
+ {children}
+
+
+
+
+ )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ )
+}
+
+function DialogTitle({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ ) {
+ return (
+
,
-)
+
+);
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 5661a34..508ab78 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,15 +1,15 @@
-import HeroSection from "../components/HeroSection"
-import IntroSection from "../components/IntroSection"
-import SearchSection from "../components/SearchSection"
+import HeroSection from "../components/HeroSection";
+import IntroSection from "../components/IntroSection";
+import SearchSection from "../components/SearchSection";
const HomePage = () => {
return (
- )
-}
+ );
+};
-export default HomePage
+export default HomePage;
Searching records...
+
+
- )
+ );
+ }
+
+ if (results.length === 0 && hasSearched) {
+ return (
+ + Search Results +
+
+ {[...Array(6)].map((_, i) => (
+
+
+
+
+
+
+ ))}
+
+
+ + No Results Found +
++ Try adjusting your search criteria to find more records. +
+
-
- )
+ return null;
}
return (
No Results Found
-Try adjusting your search criteria to find more records.
-
-
+
+ {results.map((person) => (
+
+
+
+
+
+ {person.firstName} {person.lastName}
+
+
+
+
+
+
+
+ ))}
+
+
- )
+ );
}
-
-export default SearchResults
diff --git a/src/components/SearchSection.tsx b/src/components/SearchSection.tsx
index 6c24fe1..c86a769 100644
--- a/src/components/SearchSection.tsx
+++ b/src/components/SearchSection.tsx
@@ -1,39 +1,43 @@
-"use client"
+"use client";
-import { useState } from "react"
-import SearchForm from "./SearchForm"
-import SearchResults from "./SearchResults"
-import type { SearchParams, SearchResult } from "../types/search"
-import { searchMigrants } from "../services/migrantService"
+import { useState } from "react";
+import SearchForm from "./SearchForm";
+import SearchResults from "./SearchResults";
+import type { SearchParams, SearchResult } from "../types/search";
+import { searchMigrants } from "../services/migrantService";
const SearchSection = () => {
- const [searchResults, setSearchResults] = useStateSearch Results ({results.length})
-
- {results.map((person) => (
-
-
+
-
-
- ))}
-
- 
-
-
-
- - {person.firstName} {person.lastName} -
-- Arrived {person.yearOfArrival} at age {person.ageAtMigration} -
-
-
- - From: {person.regionOfOrigin}, Italy -
-- Settled in: {person.settlementLocation}, NT -
-+ Search Results ({results.length}) +
+
+
+
+
+
+
+
+
+
+ + Arrived {person.yearOfArrival} at age{" "} + {person.ageAtMigration} +
+
+
+ + From:{" "} + {person.regionOfOrigin}, Italy +
++ Settled in:{" "} + {person.settlementLocation}, NT +
+
-