diff --git a/src/components/Section.css b/src/components/Section.css index ce29c71..5a96628 100644 --- a/src/components/Section.css +++ b/src/components/Section.css @@ -1,3 +1,11 @@ +.section { + margin-bottom: 3rem; +} + +.section > h2 { + margin: 0 0 1rem; +} + .section-skeleton { border-radius: 0.5rem; background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%); diff --git a/src/components/Section.tsx b/src/components/Section.tsx index 0157a34..6d6849d 100644 --- a/src/components/Section.tsx +++ b/src/components/Section.tsx @@ -1,5 +1,6 @@ // denne filen eier overskrift + laster/feil-håndtering, tar innholdet som 'children': +import './Section.css'; import type { ReactNode } from 'react'; type SectionProps = { @@ -20,11 +21,9 @@ export function Section({ skeletonHeight = '300px', }: SectionProps) { return ( -
-

{title}

- {isLoading && ( -
- )} +
+ {title &&

{title}

} + {isLoading &&
} {error &&

Noe gikk galt: {error.message}

} {!isLoading && !error && children}
diff --git a/src/layout/MainLayout.tsx b/src/layout/MainLayout.tsx index 0fd3fdb..d9b0ceb 100644 --- a/src/layout/MainLayout.tsx +++ b/src/layout/MainLayout.tsx @@ -1,14 +1,12 @@ -import { MovieList } from '../components/MovieList'; -import { PersonList } from '../components/PersonList'; -import { Section } from '../components/Section'; -import { TrendingPreview } from '../components/TrendingPreview'; -import { useCurMovies, usePopMovies } from '../hooks/useMovies'; -import { usePopularPeople } from '../hooks/usePeople'; -import type { Movie } from '../types/tmdb'; -import { - sortAndFilterMovies, - type SortOption, -} from '../utils/sortAndFilterMovies'; + +import { MovieList } from "../components/MovieList"; + +import { Section } from "../components/Section"; +import { TrendingPreview } from "../components/TrendingPreview"; +import { useCurMovies, usePopMovies } from "../hooks/useMovies"; + +import type { Movie } from "../types/tmdb"; +import { sortAndFilterMovies, type SortOption } from "../utils/sortAndFilterMovies"; type MainLayoutProps = { sortBy: SortOption; @@ -28,7 +26,7 @@ export function MainLayout({ }: MainLayoutProps) { const popular = usePopMovies(); const current = useCurMovies(); - const people = usePopularPeople(); + return ( <> @@ -76,14 +74,6 @@ export function MainLayout({ /> )}
-
- {people.data && } -
); }