Skip to content

Commit

Permalink
style: in favorite page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ibaliqbal
Ibaliqbal committed Jul 16, 2024
1 parent eb26e4f commit c1eb61c
Show file tree
Hide file tree
Showing 6 changed files with 168 additions and 111 deletions.
Binary file added public/empty.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/no-result.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 0 additions & 2 deletions src/layouts/DetailLayout.astro
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
---
import { ViewTransitions } from "astro:transitions";
import Banner from "@/components/Banner.astro";
import { getSession } from "auth-astro/server";
import { checkValidUser } from "@/lib/supabase/function";
interface Props {
title: string;
Expand Down
102 changes: 60 additions & 42 deletions src/pages/favorite/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,50 +58,68 @@ const datas = await getFavorite(
class="w-full grid lg:grid-cols-5 md:grid-cols-3 grid-cols-2 gap-4 mt-5 px-4 pb-16"
>
{
datas.map((data) => (
<article
class="w-full card flex flex-col h-full rounded-md"
transition:name={`${data.type} ${data.list_id} card`}
>
<Link
href={`/${data.type}/${data.list_id}`}
class="flex flex-col h-full"
datas.length > 0 ? (
datas.map((data) => (
<article
class="w-full card flex flex-col h-full rounded-md"
transition:name={`${data.type} ${data.list_id} card`}
>
{data.poster === undefined || data.poster === null ? (
<div
class="w-full aspect-[1/1.5] bg-slate-500 bg-opacity-45 rounded-t-md"
transition:name={`${data.type} ${data.list_id} poster`}
/>
) : (
<Image
src={`${import.meta.env.PUBLIC_TMDB_IMG_URL}${data.poster}`}
alt="Poster"
loading="eager"
inferSize={true}
class="w-full aspect-auto rounded-t-md"
transition:name={`${data.type} ${data.list_id} poster`}
/>
)}
<Link
href={`/${data.type}/${data.list_id}`}
class="flex flex-col h-full"
>
{data.poster === undefined || data.poster === null ? (
<div
class="w-full aspect-[1/1.5] bg-slate-500 bg-opacity-45 rounded-t-md"
transition:name={`${data.type} ${data.list_id} poster`}
/>
) : (
<Image
src={`${import.meta.env.PUBLIC_TMDB_IMG_URL}${data.poster}`}
alt="Poster"
loading="eager"
inferSize={true}
class="w-full aspect-auto rounded-t-md"
transition:name={`${data.type} ${data.list_id} poster`}
/>
)}

<div class="p-3 flex-grow">
<h1
transition:name={`${data.type} ${data.list_id} title`}
class="text-lg"
>
{data.title}
</h1>
<p transition:name={`${data.type} ${data.list_id} date`}>
{format(
data.release_list
? new Date(data.release_list)
: new Date(),
"MMMM dd, yyyy"
)}
</p>
</div>
</Link>
</article>
))
<div class="p-3 flex-grow">
<h1
transition:name={`${data.type} ${data.list_id} title`}
class="text-lg"
>
{data.title}
</h1>
<p transition:name={`${data.type} ${data.list_id} date`}>
{format(
data.release_list
? new Date(data.release_list)
: new Date(),
"MMMM dd, yyyy"
)}
</p>
</div>
</Link>
</article>
))
) : (
<section class="w-full h-dvh flex flex-col gap-4 justify-center items-center lg:col-span-5 md:col-span-3 col-span-2">
<Image
width={500}
height={500}
loading={"eager"}
src={"/empty.png"}
alt={"No list"}
/>
<h1 class="font-bold text-xl md:text-2xl lg:text-4xl">
No favorite lists,{" "}
<Link href={"/"} class="text-blue-600">
get your favorite now
</Link>
</h1>
</section>
)
}
</section>
</main>
Expand Down
88 changes: 54 additions & 34 deletions src/pages/movie/search/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Link from "@/components/ui/Link.astro";
import List from "@/components/Genre/List.astro";
import FormSearch from "@/components/React/FormSearch";
import type { Movie } from "@/types/movie";
import { Image } from "astro:assets";
export const prerender = false;
const { searchParams } = Astro.url;
Expand All @@ -16,7 +17,7 @@ const page = searchParams.get("page");
const genreListMovies: Array<Genre> = await getGenres("movie");
const datas = await getSearchDatas("movie", query, Number(page));
const datas = await getSearchDatas("movie", query, Number(page));
const movies = datas.results?.filter(
(movie: Movie) =>
Expand All @@ -38,44 +39,63 @@ const movies = datas.results?.filter(
</section>
<main class="lg:col-span-4 w-full flex flex-col gap-4 px-4">
<h1 class="font-bold text-2xl">Search for result "{query}"</h1>
<section
class="w-full mt-3 grid lg:grid-cols-4 md:grid-cols-3 grid-cols-2 gap-4"
>
{movies.map((movie) => <Card {...movie} />)}
</section>
<div class="flex w-full justify-between items-center">
<h3 class="font-semibold text-lg">{datas.page} of {datas.total_pages}</h3>
<div class="flex gap-6 items-center">
{
Number(page) === 1 || Number(page) < 0 ? null : (
<Link
class="px-6 py-3 bg-slate-800 rounded-md"
href={`/movie/search?page=${Number(page) - 1}&q=${encodeURIComponent(query)}`}
>
Prev
</Link>
)
}
{
datas.total_pages > 500 ? (
Number(page) === 500 ? null : (
{
movies.length > 0 ? (
<section class="w-full mt-3 grid lg:grid-cols-4 md:grid-cols-3 grid-cols-2 gap-4">
{movies.map((movie) => (
<Card {...movie} />
))}
</section>
) : (
<section class="mt-3 flex flex-col gap-4 items-center justify-center w-full h-dvh">
<Image
width={500}
height={500}
loading={"eager"}
src={"/no-result.png"}
alt={"No list"}
/>
<h1 class="font-bold text-xl md:text-2xl lg:text-4xl">
No results for search "{query}"
</h1>
</section>
)
}
{
movies.length > 0 && (
<div class="flex w-full justify-between items-center">
<h3 class="font-semibold text-lg">
{datas.page} of {datas.total_pages}
</h3>
<div class="flex gap-6 items-center">
{Number(page) === 1 || Number(page) < 0 ? null : (
<Link
class="px-6 py-3 bg-slate-800 rounded-md"
href={`/movie/search?page=${Number(page) - 1}&q=${encodeURIComponent(query)}`}
>
Prev
</Link>
)}
{datas.total_pages > 500 ? (
Number(page) === 500 ? null : (
<Link
href={`/movie/search?page=${Number(page) + 1}&q=${encodeURIComponent(query)}`}
class="px-6 py-3 bg-slate-800 rounded-md"
>
Next
</Link>
)
) : Number(page) === datas.total_pages ? null : (
<Link
href={`/movie/search?page=${Number(page) + 1}&q=${encodeURIComponent(query)}`}
class="px-6 py-3 bg-slate-800 rounded-md"
>
Next
</Link>
)
) : Number(page) === datas.total_pages ? null : (
<Link
href={`/movie/search?page=${Number(page) + 1}&q=${encodeURIComponent(query)}`}
class="px-6 py-3 bg-slate-800 rounded-md"
>
Next
</Link>
)
}
</div>
</div>
)}
</div>
</div>
)
}
</main>
</Layout>
87 changes: 54 additions & 33 deletions src/pages/tv/search/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Link from "@/components/ui/Link.astro";
import List from "@/components/Genre/List.astro";
import FormSearch from "@/components/React/FormSearch";
import type { Tv } from "@/types/tv";
import { Image } from "astro:assets";
export const prerender = false;
Expand Down Expand Up @@ -36,44 +37,64 @@ const shows = datas.results?.filter(
</section>
<main class="lg:col-span-4 w-full flex flex-col gap-4 px-4">
<h1 class="font-bold text-2xl">Search for result "{query}"</h1>
<section
class="w-full mt-3 grid lg:grid-cols-4 md:grid-cols-3 grid-cols-2 gap-4"
>
{shows.map((list) => <Card {...list} />)}
</section>
<div class="flex w-full justify-between items-center">
<h3 class="font-semibold text-lg">{datas.page} of {datas.total_pages}</h3>
<div class="flex gap-6 items-center">
{
Number(page) === 1 || Number(page) < 0 ? null : (
<Link
class="px-6 py-3 bg-slate-800 rounded-md"
href={`/tv/search?page=${Number(page) - 1}&q=${encodeURIComponent(query)}`}
>
Prev
</Link>
)
}
{
datas.total_pages > 500 ? (
Number(page) === 500 ? null : (
{
shows.length > 0 ? (
<section class="w-full mt-3 grid lg:grid-cols-4 md:grid-cols-3 grid-cols-2 gap-4">
{shows.map((list) => (
<Card {...list} />
))}
</section>
) : (
<section class="mt-3 flex flex-col gap-4 items-center justify-center w-full h-dvh">
<Image
width={500}
height={500}
loading={"eager"}
src={"/no-result.png"}
alt={"No list"}
/>
<h1 class="font-bold text-xl md:text-2xl lg:text-4xl">
No results for search "{query}"
</h1>
</section>
)
}

{
shows.length > 0 && (
<div class="flex w-full justify-between items-center">
<h3 class="font-semibold text-lg">
{datas.page} of {datas.total_pages}
</h3>
<div class="flex gap-6 items-center">
{Number(page) === 1 || Number(page) < 0 ? null : (
<Link
class="px-6 py-3 bg-slate-800 rounded-md"
href={`/tv/search?page=${Number(page) - 1}&q=${encodeURIComponent(query)}`}
>
Prev
</Link>
)}
{datas.total_pages > 500 ? (
Number(page) === 500 ? null : (
<Link
href={`/tv/search?page=${Number(page) + 1}&q=${encodeURIComponent(query)}`}
class="px-6 py-3 bg-slate-800 rounded-md"
>
Next
</Link>
)
) : Number(page) === datas.total_pages ? null : (
<Link
href={`/tv/search?page=${Number(page) + 1}&q=${encodeURIComponent(query)}`}
class="px-6 py-3 bg-slate-800 rounded-md"
>
Next
</Link>
)
) : Number(page) === datas.total_pages ? null : (
<Link
href={`/tv/search?page=${Number(page) + 1}&q=${encodeURIComponent(query)}`}
class="px-6 py-3 bg-slate-800 rounded-md"
>
Next
</Link>
)
}
</div>
</div>
)}
</div>
</div>
)
}
</main>
</Layout>

0 comments on commit c1eb61c

Please sign in to comment.