Skip to content

Commit

Permalink
hello
Browse files Browse the repository at this point in the history
  • Loading branch information
apo-ll committed Mar 13, 2024
1 parent aa87f6a commit 97a52c5
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 34 deletions.
18 changes: 18 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
},
"dependencies": {
"@headlessui/react": "^1.7.18",
"@radix-ui/react-icons": "^1.3.0",
"@tanstack/react-query": "^5.25.0",
"@tanstack/react-query-devtools": "^5.25.0",
"@tanstack/react-query-next-experimental": "^5.25.0",
Expand All @@ -18,6 +19,7 @@
"embla-carousel-autoplay": "^8.0.0",
"embla-carousel-react": "^8.0.0",
"embla-carousel-wheel-gestures": "^8.0.0-rc05",
"lucide-react": "^0.356.0",
"next": "14.1.3",
"react": "^18",
"react-dom": "^18",
Expand Down
47 changes: 36 additions & 11 deletions src/app/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import React, { useRef, useCallback } from "react";
import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
import { Button } from "@/components/Button";
import MobileHeader from "@/components/mobile-header";
import { Play } from 'lucide-react';


export const runtime = "edge";

Expand Down Expand Up @@ -50,7 +52,7 @@ export default function Home() {
ref={slideRef}
>
<Image
src={`https://image.tmdb.org/t/p/original${item.backdrop_path}`}
src={`https://image.tmdb.org/t/p/original${item.details.backdrop_path}`}
alt={item.title}
fill
className="object-cover"
Expand All @@ -60,17 +62,17 @@ export default function Home() {
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-black z-[999px]" />
<div className="absolute z-50 flex-col flex bottom-[100px] left-0 gap-3 transform right-0 p-4 max-w-6xl px-4 ml-7 text-white">
<h1 className="font-heading lg:text-5xl text-xl text-left mb-5">
{item.original_title ||
item.title ||
item.original_name ||
item.name}
{item.details.name || item.details.title}
</h1>
<p className="font-sans truncate ... text-xl text-left mb-4">
{item.overview}...
<p className="font-sans text-white/80 text-xl text-left mb-4">
{item.details.tagline}
</p>
<div className="flex flex-row gap-3 font-heading font-medium text-xl ">
<Button variant="default">More Info</Button>
<Button variant="outline">Watch Trailer</Button>
<div className="flex flex-row gap-3 font-heading font-medium text-lg ">
<Button variant="default" className="flex flex-row gap-2 items-center">
<Play />
<h1>Watch Trailer</h1>
</Button>
<Button variant="outline">More Info</Button>
</div>
</div>
</div>
Expand Down Expand Up @@ -98,5 +100,28 @@ async function Trending() {
},
}
);
return res.json();
const data = await res.json();

// Map over the results and fetch additional details
const trendingWithDetails = await Promise.all(
data.results.map(async (item) => {
const mediaType = item.media_type;
const itemId = item.id;

const detailsRes = await fetch(
`https://api.themoviedb.org/3/${mediaType}/${itemId}?language=en-US`,
{
headers: {
Authorization: `Bearer ${process.env.NEXT_PUBLIC_TMDB_API_KEY}`,
},
}
);

const details = await detailsRes.json();

return { ...item, details };
})
);

return { ...data, results: trendingWithDetails };
}
75 changes: 52 additions & 23 deletions src/components/mobile-header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,17 @@ import Autoplay from "embla-carousel-autoplay";
import React, { useRef, useCallback } from "react";
import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures";
import { Button } from "@/components/Button";
import { Play } from 'lucide-react';

// Import necessary modules and components...



export const runtime = "edge";

export default function MobileHeader() {
const { data: trending } = useQuery({
queryKey: ["Trending"],
queryKey: ["TrendingMobile"],
queryFn: async () => await Trending(),
});

Expand All @@ -21,6 +26,7 @@ export default function MobileHeader() {
[Autoplay({ delay: 10000 })],
[WheelGesturesPlugin()]
);

const scrollPrev = useCallback(() => {
if (emblaApi) emblaApi.scrollPrev();
}, [emblaApi]);
Expand All @@ -32,38 +38,40 @@ export default function MobileHeader() {
const slideRef = useRef(null);

return (
<main className="drop-shadow-[0_35px_35px_rgba(255,255,255,0.30)]">
<section className=" rounded-t-xl mx-auto lg:hidden block">
<main className="lg:hidden md:hidden block">
<section className="relative rounded-t-3xl mx-auto ">
<div className=" ">
<div className="embla overflow-hidden h-full" ref={emblaRef}>
<div
className="flex flex-row items-center mx-auto "
style={{ height: "100%" }}
>
<div className="embla overflow-hidden h-[300px]" ref={emblaRef}>
<div className="flex flex-row " style={{ height: "100%" }}>
{trending &&
trending.results.slice(0, 11).map((item) => (
<div
key={item.id}
className="embla__slide h-full flex flex-col items-center mx-auto " // Add shadow and shadow-white classes
className="embla__slide h-full flex flex-col relative "
ref={slideRef}
>
<div className="image-container mb-5">
<Image
src={`https://image.tmdb.org/t/p/original${item.poster_path}`}
alt={item.title}
width={300}
height={400}
className="object-cover border-2 border-white/50 rounded-lg"
src={`https://image.tmdb.org/t/p/original${item.details.backdrop_path}`}
alt={item.details.title}
fill
className="object-cover rounded-t-2xl"
loading="lazy"
unoptimized
/>
</div>
<div className=" flex-col flex gap-2 text-white">
<h1 className="font-heading text-2xl mb-1 text-center">{ item.name || item.title}</h1>
<p className="text-center text-white-50 mb-2 font-sans">{item.media_type}</p>
<div className="flex flex-row gap-3 font-heading font-medium text-sm ">
<Button variant="default" className=''>More Info</Button>
<Button variant="outline">Watch Trailer</Button>
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-black z-[999px]" />
<div className="absolute bottom-[50px] left-0 z-50 right-0 ml-5 transform flex-col flex items-left text-left text-white">
<h1 className="font-heading text-2xl mb-1 ">
{item.details.name || item.details.title}
</h1>
<p className="text-white/80 font-sans mb-3">{item.details.tagline}</p>
<div className="flex flex-row gap-x-3 font-heading font-medium text-sm items-center ">
<Button variant="default" className="flex flex-row gap-2 items-center">
<Play />
<h1>Watch Trailer</h1>
</Button>
<Button variant="outline">More Info</Button>
</div>
</div>
</div>
Expand All @@ -76,8 +84,6 @@ export default function MobileHeader() {
);
}

// He;;

async function Trending() {
const res = await fetch(
"https://api.themoviedb.org/3/trending/all/day?language=en-US",
Expand All @@ -87,5 +93,28 @@ async function Trending() {
},
}
);
return res.json();
const data = await res.json();

// Map over the results and fetch additional details
const trendingWithDetails = await Promise.all(
data.results.map(async (item) => {
const mediaType = item.media_type;
const itemId = item.id;

const detailsRes = await fetch(
`https://api.themoviedb.org/3/${mediaType}/${itemId}?language=en-US`,
{
headers: {
Authorization: `Bearer ${process.env.NEXT_PUBLIC_TMDB_API_KEY}`,
},
}
);

const details = await detailsRes.json();

return { ...item, details };
})
);

return { ...data, results: trendingWithDetails };
}

0 comments on commit 97a52c5

Please sign in to comment.