spacing cleanup, fjerne skuespillere

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%);

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 (
-    <section id={id}>
-      <h2>{title}</h2>
-      {isLoading && (
-        <div className="section-skeleton" style={{ height: skeletonHeight }} />
-      )}
+    <section id={id} className = "section">
+      {title && <h2>{title}</h2>}
+      {isLoading && <div className="section-skeleton" style={{height: skeletonHeight}}/>}
       {error && <p>Noe gikk galt: {error.message}</p>}
       {!isLoading && !error && children}
     </section>

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({
           />
         )}
       </Section>
-      <Section
-        id="skuespillere"
-        title="Skuespillere"
-        isLoading={people.isLoading}
-        error={people.error}
-      >
-        {people.data && <PersonList people={people.data.results} />}
-      </Section>
     </>
   );
 }