+
+ )
+}
diff --git a/jobs/Frontend/src/components/Header/Header.tsx b/jobs/Frontend/src/components/Header/Header.tsx
new file mode 100644
index 0000000000..d2cd78f8a3
--- /dev/null
+++ b/jobs/Frontend/src/components/Header/Header.tsx
@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+import { LanguageSelector } from "../LanguageSelector/LanguageSelector";
+import { Button } from "../ui/button";
+import { useTranslation } from "react-i18next";
+import { Github } from "lucide-react";
+
+interface IProps {
+ leftNode?: ReactNode;
+}
+export function Header(props: IProps) {
+ const { t } = useTranslation();
+
+ return (
+ {t('oops')}
+{t('title')}
++ {error?.status} + {error?.statusText || error?.message} +
+ +
+
+ Movie Search
+
+
+ );
+}
diff --git a/jobs/Frontend/src/components/LanguageSelector/LanguageSelector.tsx b/jobs/Frontend/src/components/LanguageSelector/LanguageSelector.tsx
new file mode 100644
index 0000000000..9f4c047c9b
--- /dev/null
+++ b/jobs/Frontend/src/components/LanguageSelector/LanguageSelector.tsx
@@ -0,0 +1,63 @@
+import { useTranslation } from 'react-i18next'
+import { useCallback, useMemo } from 'react'
+import { Popover, PopoverArrow, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { cn } from 'src/lib/utils'
+import { LANGUAGES } from 'src/i18n/config'
+import { Languages, ChevronDown } from 'lucide-react'
+import i18next from 'i18next'
+
+const getLocaleDisplayName = (locale: string, displayLocale?: string) => {
+ const displayName = new Intl.DisplayNames([displayLocale || locale], {
+ type: 'language',
+ }).of(locale)!
+ return displayName.charAt(0).toLocaleUpperCase() + displayName.slice(1)
+}
+
+const LanguageSelector = () => {
+ const { i18n } = useTranslation()
+
+ const localesAndNames = useMemo(() => {
+ return LANGUAGES.map((locale) => ({
+ locale,
+ name: getLocaleDisplayName(locale),
+ }))
+ }, [])
+
+ const languageChanged = useCallback(async (locale: any) => {
+ i18next.changeLanguage(locale)
+ }, [])
+
+ const { resolvedLanguage: currentLanguage } = i18n
+
+ return (
+
+
+
+
+
+
+
+
+ {localesAndNames.map(({ locale, name }) => {
+ const isSelected = currentLanguage === locale
+ return (
+
+
+
+ )
+}
+
+export { LanguageSelector }
diff --git a/jobs/Frontend/src/components/Main/Main.stories.tsx b/jobs/Frontend/src/components/Main/Main.stories.tsx
new file mode 100644
index 0000000000..af64462606
--- /dev/null
+++ b/jobs/Frontend/src/components/Main/Main.stories.tsx
@@ -0,0 +1,88 @@
+import { Meta, StoryObj } from "@storybook/react-vite/*";
+import { Main } from "./Main";
+import { expect, userEvent, within } from "storybook/internal/test";
+import { Route, Routes } from "react-router-dom";
+
+import {
+ MovieImagesResponse,
+ MovieMockedResponse,
+ MoviesMockedResponse,
+} from "./mockData";
+
+const handlers = [
+ MoviesMockedResponse,
+ MovieMockedResponse,
+ MovieImagesResponse,
+];
+
+const meta = {
+ component: Main,
+ args: {},
+ parameters: {
+ msw: {
+ handlers,
+ },
+ },
+} satisfies Meta
+
+ languageChanged(locale)}
+ className={cn(`relative w-auto cursor-pointer select-none px-4 py-2 text-black hover:bg-zinc-200`)}
+ >
+ {name}
+
+ )
+ })}
+
+
+
+
+ );
+};
diff --git a/jobs/Frontend/src/components/Main/mockData.ts b/jobs/Frontend/src/components/Main/mockData.ts
new file mode 100644
index 0000000000..bb5aeb41f1
--- /dev/null
+++ b/jobs/Frontend/src/components/Main/mockData.ts
@@ -0,0 +1,111 @@
+import { http, HttpResponse } from "msw";
+
+export const MoviesMockedResponse = http.get(
+ "https://api.themoviedb.org/3/search/movie",
+ () => {
+ return HttpResponse.json({
+ page: 1,
+ total_pages: 19,
+ total_results: 369,
+ results: [
+ {
+ adult: false,
+ backdrop_path: null,
+ belongs_to_collection: null,
+ budget: 0,
+ genres: [
+ {
+ id: 16,
+ name: "Animation",
+ },
+ ],
+ homepage: "https://fionavp.weebly.com/wick2023.html",
+ id: 1390246,
+ imdb_id: null,
+ origin_country: ["FR"],
+ original_language: "en",
+ original_title: "Wick",
+ overview:
+ "On a dark, stormy night a treasure hunter falls victim to his greed - and some very bad luck.",
+ popularity: 0.0143,
+ poster_path: "/6zpc3rYTS44hJkUVvNQ9h8Lw50T.jpg",
+ production_companies: [],
+ production_countries: [
+ {
+ iso_3166_1: "FR",
+ name: "France",
+ },
+ {
+ iso_3166_1: "GB",
+ name: "United Kingdom",
+ },
+ ],
+ release_date: "2023-07-27",
+ revenue: 0,
+ runtime: 2,
+ spoken_languages: [],
+ status: "Released",
+ tagline: "",
+ title: "Wick",
+ video: false,
+ vote_average: 0,
+ vote_count: 0,
+ },
+ ],
+ });
+ }
+);
+
+export const MovieMockedResponse = http.get(
+ "https://api.themoviedb.org/3/movie/:movieId",
+ () => {
+ return HttpResponse.json({
+ adult: false,
+ backdrop_path: null,
+ belongs_to_collection: null,
+ budget: 0,
+ genres: [
+ {
+ id: 16,
+ name: "Animation",
+ },
+ ],
+ homepage: "https://fionavp.weebly.com/wick2023.html",
+ id: 1390246,
+ imdb_id: null,
+ origin_country: ["FR"],
+ original_language: "en",
+ original_title: "Wick",
+ overview:
+ "On a dark, stormy night a treasure hunter falls victim to his greed - and some very bad luck.",
+ popularity: 0.0143,
+ poster_path: "/6zpc3rYTS44hJkUVvNQ9h8Lw50T.jpg",
+ production_companies: [],
+ production_countries: [
+ {
+ iso_3166_1: "FR",
+ name: "France",
+ },
+ {
+ iso_3166_1: "GB",
+ name: "United Kingdom",
+ },
+ ],
+ release_date: "2023-07-27",
+ revenue: 0,
+ runtime: 2,
+ spoken_languages: [],
+ status: "Released",
+ tagline: "",
+ title: "Wick",
+ video: false,
+ vote_average: 0.0,
+ vote_count: 0,
+ });
+ }
+);
+
+export const MovieImagesResponse = http.get(
+ "https://image.tmdb.org/t/p/original/*",
+ () => new HttpResponse(null, { status: 200 })
+);
diff --git a/jobs/Frontend/src/components/Movies/DataPoint.tsx b/jobs/Frontend/src/components/Movies/DataPoint.tsx
new file mode 100644
index 0000000000..d327a3c94e
--- /dev/null
+++ b/jobs/Frontend/src/components/Movies/DataPoint.tsx
@@ -0,0 +1,19 @@
+import { useId } from "react";
+
+export const DataPoint = ({
+ title,
+ value,
+}: {
+ title: string;
+ value: string | number | undefined;
+}) => {
+ const id = useId();
+ return (
+
+
+
+
+
+ setSearch(e.target.value)}
+ className="h-full rounded-sm !text-lg"
+ value={search ?? ""}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}:
+ {" "}
+ {value}
+
+ );
+};
diff --git a/jobs/Frontend/src/components/Movies/DetailLists.tsx b/jobs/Frontend/src/components/Movies/DetailLists.tsx
new file mode 100644
index 0000000000..aa30f08826
--- /dev/null
+++ b/jobs/Frontend/src/components/Movies/DetailLists.tsx
@@ -0,0 +1,23 @@
+import {
+ MovieDetailGenres,
+ MovieDetailProductionCountries,
+} from "src/types/custom";
+
+export const DetailLists = ({
+ title,
+ data,
+}: {
+ title: string;
+ data: MovieDetailProductionCountries | MovieDetailGenres;
+}) => {
+ return (
+ <>
+ {title}:
+-
+ {data?.map((d) => (
+
- {d.name} + ))} +
+ {movie?.original_title} Details: +
*/} + +
+ ) : (
+ 
+ )}
+
+ -
+
+
+ );
+};
diff --git a/jobs/Frontend/src/components/Search/Search.tsx b/jobs/Frontend/src/components/Search/Search.tsx
new file mode 100644
index 0000000000..a77ab4b5cd
--- /dev/null
+++ b/jobs/Frontend/src/components/Search/Search.tsx
@@ -0,0 +1,88 @@
+import { Loader2Icon } from "lucide-react";
+import { Card, CardContent, CardFooter } from "../ui/card";
+import { MovieSearchResponse } from "src/types/custom";
+
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { SearchPagination } from "./SearchPagination";
+
+type SearchTypes = {
+ data?: MovieSearchResponse;
+ error: unknown;
+ isLoading: boolean;
+ isFetching: boolean;
+};
+
+export const SearchResults = ({ movies }: { movies: SearchTypes }) => {
+ const navigate = useNavigate();
+
+ const [searchParams] = useSearchParams();
+
+ return (
+ <>
+ {movies.data ? (
+ Movie details here:
+ {loading && ( +Results:
+-
+ {movies?.data?.results?.map((m) => {
+ return (
+
- {
+ navigate({
+ pathname: `/${m.id}`,
+ search: `?search=${searchParams.get(
+ "search"
+ )}&page=${searchParams.get("page")}`,
+ });
+ }}
+ >
+ {m.poster_path ? (
+
+ ) : ( +
+ )}
+ ++{m.title}
+ {m.overview} + + {m.release_date} + +
+ );
+ })}
+
+
+ );
+};
diff --git a/jobs/Frontend/src/components/Search/SearchPagination.tsx b/jobs/Frontend/src/components/Search/SearchPagination.tsx
new file mode 100644
index 0000000000..1c64f17a49
--- /dev/null
+++ b/jobs/Frontend/src/components/Search/SearchPagination.tsx
@@ -0,0 +1,130 @@
+import { MovieSearchResponse } from "src/types/custom";
+import {
+ Pagination,
+ PaginationContent,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from "../ui/pagination";
+import { useSearchParams } from "react-router-dom";
+
+export const SearchPagination = ({ data }: { data: MovieSearchResponse }) => {
+ let [searchParams, setSearchParams] = useSearchParams();
+
+ const currentPage = parseInt(searchParams.get("page")!);
+ const totalPages = data?.total_pages;
+
+ const previousActive = currentPage > 1;
+ const nextActive = currentPage < totalPages;
+
+ const pages = getPages(totalPages, currentPage);
+
+ return (
+ Movie search here:
+ {loading && ( +
+
+ );
+};
diff --git a/jobs/Frontend/src/components/ui/button.tsx b/jobs/Frontend/src/components/ui/button.tsx
new file mode 100644
index 0000000000..e258bf0dfb
--- /dev/null
+++ b/jobs/Frontend/src/components/ui/button.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from 'src/lib/utils'
+import { PropsWithChildren } from 'react'
+
+const buttonVariants = cva(
+ 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+ destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+ outline: 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+ secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
+ link: 'text-primary underline-offset-4 hover:underline',
+ },
+ size: {
+ default: 'h-9 px-4 py-2',
+ sm: 'h-8 rounded-md px-3 text-xs',
+ lg: 'h-10 rounded-md px-8',
+ icon: 'h-9 w-9',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ },
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes
+
+))
+NavigationMenuViewport.displayName =
+ NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+ React.ElementRef