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 1 commit
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
184 changes: 0 additions & 184 deletions FrameRate/src/App.css
View file
Open in desktop

This file was deleted.

125 changes: 8 additions & 117 deletions FrameRate/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,13 @@
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>
);
}

export default App
export default App;
56 changes: 56 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,56 @@
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 hours = Math.floor(movie.runtime / 60);
const minutes = movie.runtime % 60;
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>{hours}t {minutes}m</span>
<span>{genreNames.join(' / ')}</span>
<span>Regi: {movie.director}</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>
);
}
Loading