Skip to content

feat: Added layout (header/footer), featured movie component and some animations #20

Merged
merged 5 commits into from
Oct 15, 2026
+667 −362
Merged

feat: Added layout (header/footer), featured movie component and some animations #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
35c07de
Fjernet felt som ikke brukes
Oct 15, 2026
e034a68
feat: Added layout (header/footer) and featured movie component
philiphn Oct 15, 2026
576ceb2
Update AI_Deklarasjon.md
philiphn Oct 15, 2026
8585336
Merge branch 'main' into layout
kevinnt Oct 15, 2026
e1ec174
Merged with main, og kjørt Prettier og Lint
Oct 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
182 changes: 0 additions & 182 deletions FrameRate/src/App.css
View file
Open in desktop

This file was deleted.

101 changes: 6 additions & 95 deletions FrameRate/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,101 +1,12 @@
import { useState } from 'react';
import heroImg from './assets/hero.png';
import reactLogo from './assets/react.svg';
import viteLogo from './assets/vite.svg';
import './App.css';
import './index.css';
import { Layout } from './components/layout/Layout';
import { FeaturedMovie } from './components/FeaturedMovie';

function App() {
const [count, setCount] = useState(0);

return (
<>
<section id="center">
<div className="hero">
<img src={heroImg} className="base" width="170" height="179" alt="" />
<img src={reactLogo} className="framework" alt="React logo" />
<img src={viteLogo} className="vite" alt="Vite logo" />
</div>
<div>
<h1>Get started</h1>
<p>
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
</p>
</div>
<button type="button" className="counter" onClick={() => setCount(count => count + 1)}>
Count is {count}
</button>
</section>

<div className="ticks"></div>

<section id="next-steps">
<div id="docs">
<svg className="icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#documentation-icon"></use>
</svg>
<h2>Documentation</h2>
<p>Your questions, answered</p>
<ul>
<li>
<a href="https://vite.dev/" target="_blank">
<img className="logo" src={viteLogo} alt="" />
Explore Vite
</a>
</li>
<li>
<a href="https://react.dev/" target="_blank">
<img className="button-icon" src={reactLogo} alt="" />
Learn more
</a>
</li>
</ul>
</div>
<div id="social">
<svg className="icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#social-icon"></use>
</svg>
<h2>Connect with us</h2>
<p>Join the Vite community</p>
<ul>
<li>
<a href="https://github.com/vitejs/vite" target="_blank">
<svg className="button-icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#github-icon"></use>
</svg>
GitHub
</a>
</li>
<li>
<a href="https://chat.vite.dev/" target="_blank">
<svg className="button-icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#discord-icon"></use>
</svg>
Discord
</a>
</li>
<li>
<a href="https://x.com/vite_js" target="_blank">
<svg className="button-icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#x-icon"></use>
</svg>
X.com
</a>
</li>
<li>
<a href="https://bsky.app/profile/vite.dev" target="_blank">
<svg className="button-icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#bluesky-icon"></use>
</svg>
Bluesky
</a>
</li>
</ul>
</div>
</section>

<div className="ticks"></div>
<section id="spacer"></section>
</>
<Layout>
<FeaturedMovie />
</Layout>
);
}

Expand Down
60 changes: 60 additions & 0 deletions FrameRate/src/components/FeaturedMovie.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import { featuredMovie as movie, featuredReview as review, genres } from '../data/mockData';

const IMAGE_BASE = 'https://image.tmdb.org/t/p';
const DICE = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅'];

export function FeaturedMovie() {
const year = movie.release_date.slice(0, 4);
const genreNames = movie.genre_ids.map(id => genres[id]);
const rounded = Math.round(movie.average_rating);

return (
<section className="featured">
{/* Venstre: tekst */}
<div className="featured-content">
<p className="featured-label">Utvalgt fra topplisten</p>
<h1 className="featured-title">{movie.title}</h1>

<p className="featured-meta">
<span>{year}</span>
<span>{genreNames.join(' / ')}</span>
</p>

<div className="featured-rating">
<span className="featured-dice" aria-hidden="true">
{DICE[rounded - 1]}
</span>
<div>
<p className="featured-rating-title">Terningkast {movie.average_rating.toFixed(1)}</p>
<p className="featured-rating-count">Basert på {movie.review_count} anmeldelser</p>
</div>
</div>

<blockquote className="featured-quote">
<p>«{review.text}»</p>
<footer>
— {review.author}, {review.date}
</footer>
</blockquote>

<div className="featured-buttons">
<a href={`/film/${movie.id}`} className="button-white">
Les mer om filmen
</a>
<button type="button" className="button-outline">
Legg i min liste
</button>
</div>
</div>

{/* Høyre: plakat */}
<img
className="featured-poster"
src={`${IMAGE_BASE}/w342${movie.poster_path}`}
alt={`Plakat for ${movie.title}`}
width="342"
height="513"
/>
</section>
);
}
28 changes: 28 additions & 0 deletions FrameRate/src/components/layout/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
export function Footer() {
return (
<footer className="footer">
<div className="footer-top">
<div>
<div className="footer-brand">
<span className="footer-logo">Frame Rate</span>
<span className="footer-tagline">Rate the frames</span>
</div>
<p className="footer-text">
Finn filmer, gi terningkast og del anmeldelser med andre filmelskere.
</p>
</div>

<nav aria-label="Bunntekst" className="footer-links">
<a href="/om-oss">Om oss</a>
<a href="/kriterier">Kriterier for terningkast</a>
<a href="/kontakt">Kontakt</a>
</nav>
</div>

<div className="footer-bottom">
<span>© 2026 Frame Rate</span>
<span>Filmdata og bilder fra TMDB</span>
</div>
</footer>
);
}
Loading