diff options
Diffstat (limited to 'examples/view-transitions/src/components')
5 files changed, 175 insertions, 144 deletions
diff --git a/examples/view-transitions/src/components/Footer.astro b/examples/view-transitions/src/components/Footer.astro index 45f1338b0..d9f29219b 100644 --- a/examples/view-transitions/src/components/Footer.astro +++ b/examples/view-transitions/src/components/Footer.astro @@ -1,17 +1,17 @@ <footer class="border border-t border-gray-800"> - <div class="container mx-auto text-sm px-4 py-6"> - Made with ❤️ by <a - href="https://www.twitter.com/charca" - target="_blank" - class="underline hover:text-gray-300">Maxi Ferreira</a - > — Powered by <a - href="https://astro.build" - target="_blank" - class="underline hover:text-gray-300">Astro</a - > and <a - href="https://www.themoviedb.org/documentation/api" - target="_blank" - class="underline hover:text-gray-300">TMDb API</a - >. - </div> + <div class="container mx-auto text-sm px-4 py-6"> + Made with ❤️ by <a + href="https://www.twitter.com/charca" + target="_blank" + class="underline hover:text-gray-300">Maxi Ferreira</a + > — Powered by <a + href="https://astro.build" + target="_blank" + class="underline hover:text-gray-300">Astro</a + > and <a + href="https://www.themoviedb.org/documentation/api" + target="_blank" + class="underline hover:text-gray-300">TMDb API</a + >. + </div> </footer> diff --git a/examples/view-transitions/src/components/MovieCard.astro b/examples/view-transitions/src/components/MovieCard.astro index eed190efd..c2b3aa4b1 100644 --- a/examples/view-transitions/src/components/MovieCard.astro +++ b/examples/view-transitions/src/components/MovieCard.astro @@ -3,21 +3,29 @@ const { movie } = Astro.props; --- <div class="mt-8"> - <a href={`/movies/${movie.id}`}> - <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} - alt={`${movie.title} Poster`} - class="thumbnail hover:opacity-75 transition ease-in-out duration-150" - id={`movie-poster-${movie.id}`} - transition:name={`poster-${movie.id}`}> - </a> - <div class="mt-2"> - <a href={`/movies/${movie.id}`} class="text-lg mt-2 hover:text-gray-300">{movie.title}</a> - <div class="flex items-center text-gray-400 text-sm mt-1"> - <svg class="fill-current text-orange-500 w-4" viewBox="0 0 24 24"><g data-name="Layer 2"><path d="M17.56 21a1 1 0 01-.46-.11L12 18.22l-5.1 2.67a1 1 0 01-1.45-1.06l1-5.63-4.12-4a1 1 0 01-.25-1 1 1 0 01.81-.68l5.7-.83 2.51-5.13a1 1 0 011.8 0l2.54 5.12 5.7.83a1 1 0 01.81.68 1 1 0 01-.25 1l-4.12 4 1 5.63a1 1 0 01-.4 1 1 1 0 01-.62.18z" data-name="star"/></g></svg> - <span class="ml-1">{movie.vote_average}</span> - <span class="mx-2">|</span> - <span>{movie.release_date}</span> - </div> - <div class="text-gray-400 text-sm">{movie.genres}</div> - </div> + <a href={`/movies/${movie.id}`}> + <img + src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} + alt={`${movie.title} Poster`} + class="thumbnail hover:opacity-75 transition ease-in-out duration-150" + id={`movie-poster-${movie.id}`} + transition:name={`poster-${movie.id}`} + /> + </a> + <div class="mt-2"> + <a href={`/movies/${movie.id}`} class="text-lg mt-2 hover:text-gray-300">{movie.title}</a> + <div class="flex items-center text-gray-400 text-sm mt-1"> + <svg class="fill-current text-orange-500 w-4" viewBox="0 0 24 24" + ><g data-name="Layer 2" + ><path + d="M17.56 21a1 1 0 01-.46-.11L12 18.22l-5.1 2.67a1 1 0 01-1.45-1.06l1-5.63-4.12-4a1 1 0 01-.25-1 1 1 0 01.81-.68l5.7-.83 2.51-5.13a1 1 0 011.8 0l2.54 5.12 5.7.83a1 1 0 01.81.68 1 1 0 01-.25 1l-4.12 4 1 5.63a1 1 0 01-.4 1 1 1 0 01-.62.18z" + data-name="star"></path></g + ></svg + > + <span class="ml-1">{movie.vote_average}</span> + <span class="mx-2">|</span> + <span>{movie.release_date}</span> + </div> + <div class="text-gray-400 text-sm">{movie.genres}</div> + </div> </div> diff --git a/examples/view-transitions/src/components/MovieDetails.astro b/examples/view-transitions/src/components/MovieDetails.astro index d03340a4b..32af40090 100644 --- a/examples/view-transitions/src/components/MovieDetails.astro +++ b/examples/view-transitions/src/components/MovieDetails.astro @@ -2,99 +2,124 @@ const { data } = Astro.props; const movie = { - ...data, - poster_path: data.poster_path - ? 'https://image.tmdb.org/t/p/w500/' + data.poster_path - : 'https://via.placeholder.com/500x750', - vote_average: (data.vote_average * 10).toFixed(2) + '%', - release_date: new Date(data.release_date).toLocaleDateString('en-us', { - year: 'numeric', - month: 'long', - day: 'numeric' - }), - genres: data.genres.map((g: any) => g.name).join(', '), - crew: data.credits.crew.slice(0,3), - cast: data.credits.cast.slice(0,5).map((c: any) => ({ - ...c, - profile_path: c.profile_path - ? 'https://image.tmdb.org/t/p/w300/' + c.profile_path - : 'https://via.placeholder.com/300x450' - })), - images: data.images.backdrops.slice(0, 9), -} + ...data, + poster_path: data.poster_path + ? 'https://image.tmdb.org/t/p/w500/' + data.poster_path + : 'https://via.placeholder.com/500x750', + vote_average: (data.vote_average * 10).toFixed(2) + '%', + release_date: new Date(data.release_date).toLocaleDateString('en-us', { + year: 'numeric', + month: 'long', + day: 'numeric', + }), + genres: data.genres.map((g: any) => g.name).join(', '), + crew: data.credits.crew.slice(0, 3), + cast: data.credits.cast.slice(0, 5).map((c: any) => ({ + ...c, + profile_path: c.profile_path + ? 'https://image.tmdb.org/t/p/w300/' + c.profile_path + : 'https://via.placeholder.com/300x450', + })), + images: data.images.backdrops.slice(0, 9), +}; --- <div class="movie-info border-b border-gray-800"> - <div class="container mx-auto px-4 py-16 flex flex-col md:flex-row"> - <div class="flex-none"> - <img src={movie.poster_path} - alt={`${movie.title} Poster`} - class="movie-poster w-64 lg:w-96" - id="movie-poster" - transition:name={`poster-${movie.id}`}> - </div> - <div class="md:ml-24"> - <h2 class="text-4xl mt-4 md:mt-0 mb-2 font-semibold">{movie.title}</h2> - <div class="flex flex-wrap items-center text-gray-400 text-sm"> - <svg class="fill-current text-orange-500 w-4" viewBox="0 0 24 24"><g data-name="Layer 2"><path d="M17.56 21a1 1 0 01-.46-.11L12 18.22l-5.1 2.67a1 1 0 01-1.45-1.06l1-5.63-4.12-4a1 1 0 01-.25-1 1 1 0 01.81-.68l5.7-.83 2.51-5.13a1 1 0 011.8 0l2.54 5.12 5.7.83a1 1 0 01.81.68 1 1 0 01-.25 1l-4.12 4 1 5.63a1 1 0 01-.4 1 1 1 0 01-.62.18z" data-name="star"/></g></svg> - <span class="ml-1">{movie.vote_average}</span> - <span class="mx-2">|</span> - <span>{movie.release_date}</span> - <span class="mx-2">|</span> - <span>{movie.genres}</span> - </div> + <div class="container mx-auto px-4 py-16 flex flex-col md:flex-row"> + <div class="flex-none"> + <img + src={movie.poster_path} + alt={`${movie.title} Poster`} + class="movie-poster w-64 lg:w-96" + id="movie-poster" + transition:name={`poster-${movie.id}`} + /> + </div> + <div class="md:ml-24"> + <h2 class="text-4xl mt-4 md:mt-0 mb-2 font-semibold">{movie.title}</h2> + <div class="flex flex-wrap items-center text-gray-400 text-sm"> + <svg class="fill-current text-orange-500 w-4" viewBox="0 0 24 24" + ><g data-name="Layer 2" + ><path + d="M17.56 21a1 1 0 01-.46-.11L12 18.22l-5.1 2.67a1 1 0 01-1.45-1.06l1-5.63-4.12-4a1 1 0 01-.25-1 1 1 0 01.81-.68l5.7-.83 2.51-5.13a1 1 0 011.8 0l2.54 5.12 5.7.83a1 1 0 01.81.68 1 1 0 01-.25 1l-4.12 4 1 5.63a1 1 0 01-.4 1 1 1 0 01-.62.18z" + data-name="star"></path></g + ></svg + > + <span class="ml-1">{movie.vote_average}</span> + <span class="mx-2">|</span> + <span>{movie.release_date}</span> + <span class="mx-2">|</span> + <span>{movie.genres}</span> + </div> - <p class="text-gray-300 mt-8"> - {movie.overview} - </p> + <p class="text-gray-300 mt-8"> + {movie.overview} + </p> - <div class="mt-12"> - <h4 class="text-white font-semibold">Featured Crew</h4> - <div class="flex mt-4"> - {movie.crew.map((crew: any) => ( - <div class="mr-8"> - <div>{crew.name}</div> - <div class="text-gray-400 text-sm">{crew.job}</div> - </div> - ))} - </div> - </div> - </div> - </div> -</div> <!-- end movie-info --> + <div class="mt-12"> + <h4 class="text-white font-semibold">Featured Crew</h4> + <div class="flex mt-4"> + { + movie.crew.map((crew: any) => ( + <div class="mr-8"> + <div>{crew.name}</div> + <div class="text-gray-400 text-sm">{crew.job}</div> + </div> + )) + } + </div> + </div> + </div> + </div> +</div> +<!-- end movie-info --> <div class="movie-cast border-b border-gray-800"> - <div class="container mx-auto px-4 py-16"> - <h2 class="text-4xl font-semibold">Cast</h2> - <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8"> - {movie.cast.map((cast: any) => ( - <div class="mt-8"> - <span> - <img id={`person-photo-${cast.id}`} src={cast.profile_path} alt={cast.name} class="thumbnail hover:opacity-75 transition ease-in-out duration-150"> - </span> - <div class="mt-2"> - <span class="text-lg mt-2 hover:text-gray:300">{cast.name}</span> - <div class="text-sm text-gray-400"> - {cast.character} - </div> - </div> - </div> - ))} - </div> - </div> -</div> <!-- end movie-cast --> + <div class="container mx-auto px-4 py-16"> + <h2 class="text-4xl font-semibold">Cast</h2> + <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8"> + { + movie.cast.map((cast: any) => ( + <div class="mt-8"> + <span> + <img + id={`person-photo-${cast.id}`} + src={cast.profile_path} + alt={cast.name} + class="thumbnail hover:opacity-75 transition ease-in-out duration-150" + /> + </span> + <div class="mt-2"> + <span class="text-lg mt-2 hover:text-gray:300">{cast.name}</span> + <div class="text-sm text-gray-400">{cast.character}</div> + </div> + </div> + )) + } + </div> + </div> +</div> +<!-- end movie-cast --> <div class="movie-images"> - <div class="container mx-auto px-4 py-16"> - <h2 class="text-4xl font-semibold">Images</h2> - <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8"> - {movie.images.map((image: any) => ( - <div class="mt-8"> - <span> - <img src={`https://image.tmdb.org/t/p/w500${image.file_path}`} loading="lazy" alt={movie.name} class="hover:opacity-75 transition ease-in-out duration-150"> - </span> - </div> - ))} - </div> - </div> -</div> <!-- end movie-images --> + <div class="container mx-auto px-4 py-16"> + <h2 class="text-4xl font-semibold">Images</h2> + <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8"> + { + movie.images.map((image: any) => ( + <div class="mt-8"> + <span> + <img + src={`https://image.tmdb.org/t/p/w500${image.file_path}`} + loading="lazy" + alt={movie.name} + class="hover:opacity-75 transition ease-in-out duration-150" + /> + </span> + </div> + )) + } + </div> + </div> +</div> +<!-- end movie-images --> diff --git a/examples/view-transitions/src/components/MovieList.astro b/examples/view-transitions/src/components/MovieList.astro index 69679619c..a6bf53453 100644 --- a/examples/view-transitions/src/components/MovieList.astro +++ b/examples/view-transitions/src/components/MovieList.astro @@ -5,15 +5,11 @@ const popularMovies = movies.results; --- <div class="container mx-auto px-4 pt-16 mb-16"> - <div class="popular-movies"> - <h2 class="uppercase tracking-wider text-orange-500 text-lg font-semibold"> - Popular Movies - </h2> - <div - class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8" - > - {popularMovies.map((movie) => <MovieCard movie={movie} />)} - </div> - </div> - <!-- end pouplar-movies --> + <div class="popular-movies"> + <h2 class="uppercase tracking-wider text-orange-500 text-lg font-semibold">Popular Movies</h2> + <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8"> + {popularMovies.map((movie) => <MovieCard movie={movie} />)} + </div> + </div> + <!-- end pouplar-movies --> </div> diff --git a/examples/view-transitions/src/components/Nav.astro b/examples/view-transitions/src/components/Nav.astro index c0ca3d5e3..1f7f2fec5 100644 --- a/examples/view-transitions/src/components/Nav.astro +++ b/examples/view-transitions/src/components/Nav.astro @@ -1,16 +1,18 @@ <nav class="nav border-b border-gray-800 sticky top-0 z-30 bg-gray-900"> - <div class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between px-4 py-6"> - <ul class="flex flex-col md:flex-row items-center"> - <li> - <a href="/" class="flex items-center font-bold text-xl"> - <span>Movies</span> - - <span class="text-orange-500">List</span> - </a> - </li> - <li class="md:ml-16 mt-3 md:mt-0"> - <a href="/" class="hover:text-gray-300">Movies</a> - </li> - </ul> - </div> + <div + class="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between px-4 py-6" + > + <ul class="flex flex-col md:flex-row items-center"> + <li> + <a href="/" class="flex items-center font-bold text-xl"> + <span>Movies</span> + + <span class="text-orange-500">List</span> + </a> + </li> + <li class="md:ml-16 mt-3 md:mt-0"> + <a href="/" class="hover:text-gray-300">Movies</a> + </li> + </ul> + </div> </nav> |