refactor: pages layout

FatumaA · Jun 21, 2024 · 756fbcc · 756fbcc
1 parent f798d9c
commit 756fbcc
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 85 deletions.
diff --git a/src/pages/rick-morty-exp.astro b/src/pages/rick-morty-exp.astro
@@ -1,72 +1,61 @@
 ---
-import MainLayout from "../layouts/MainLayout.astro";
+import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import { Icon } from "astro-icon/components";
 import Image from "astro:assets";
-import logo from "../assets/logo.png";
-import { getAllEpisodesQuery } from "../queries/get-episodes";
-import { type Episode, type Character } from "../models/rick-morty";
+import { getAllCharactersQuery } from "../queries/get-episodes";
+import { type Character } from "../models/rick-morty";
 
 export const prerender = false;
 const response = await fetch("https://rickandmortyapi.com/graphql", {
 	method: "POST",
 	headers: { "Content-Type": "application/json" },
 	body: JSON.stringify({
-		query: getAllEpisodesQuery,
+		query: getAllCharactersQuery,
 	}),
 });
 
 const {
 	data: {
-		episodes: { results },
+		characters: { results },
 	},
 } = await response.json();
 
-console.log("First episode name:", results[0].name);
-console.log("Third episode details:", results[2]);
+console.log("First episode name:", results);
 ---
 
-<MainLayout>
-	<div class="container mx-auto my-1 text-center text-justify-center">
-		<a href="/" class="flex mr-auto">
-			<img
-				src="/src/assets/logo.png"
-				alt="logo"
-				class="w-40 h-40 object-contain"
-			/>
-			<a>
-				<h1 class="text-3xl mb-12">Example Rick and Morty Page</h1>
-				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-					{
-						results.map((result: Episode) => (
-							<div class="flex flex-col gap-3 ">
-								{result.characters.map((char: Character) => (
-									<div class="border rounded-lg">
-										<img
-											src={char.image}
-											alt={char.name}
-											class="w-full h-64 object-cover rounded-lg"
-										/>
-										<div class=" p-2">
-											<div class="bg-green-200 rounded-md p-2 mb-2 text-xl">
-												<span class="font-bold">Episode name: </span>
-												<span>{result.name}</span>
-											</div>
-											<div>
-												<span>Details: </span>
-												<span class="  font-semibold">{result.episode}</span>
-											</div>
-											<div class="text-sm text-gray-600 mt-6">
-												<span class="">Aired on: </span>
-												<span> {result.air_date} </span>
-											</div>
-										</div>
-									</div>
-								))}
-							</div>
-						))
-					}
-				</div>
-			</a>
-		</a>
-	</div></MainLayout
+<StarlightPage
+	frontmatter={{
+		title: "Rick and Morty Character Explorer",
+		template: "splash",
+	}}
 >
+	<div class="container mx-auto my-1 text-center text-justify-center">
+		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+			{
+				results.map((character: Character) => (
+					<div class="border rounded-lg">
+						<img
+							src={character.image}
+							alt={character.name}
+							class="w-full h-64 object-contain rounded-lg"
+						/>
+						<div class="flex flex-row items-center justify-center gap-4 px-2">
+							<p class="">{character.name}</p>
+							<a
+								href="/rick-morty-exp/xx"
+								rel="noopener noreferrer"
+								class="text-black"
+							>
+								<Icon
+									name="arrow"
+									size={24}
+									class=" cursor-pointer rotate-90"
+								/>
+							</a>
+						</div>
+					</div>
+				))
+			}
+		</div>
+	</div>
+</StarlightPage>
diff --git a/src/pages/unsplash-exp.astro b/src/pages/unsplash-exp.astro
@@ -162,37 +162,35 @@ console.log(photoList);
 				alt="logo"
 				class="w-40 h-40 object-contain"
 			/>
-			<a>
-				<h1 class="text-3xl mb-12">Example Unsplash Page</h1>
-				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-					{
-						photoList.map((photo: UnsplashPhoto) => (
-							<div class="border rounded-lg ">
-								<img
-									src={photo.urls.small}
-									alt={photo.alt_description}
-									class="w-full h-64 object-cover rounded-lg"
-								/>
-								<div class="flex flex-row items-center justify-center gap-4 px-2">
-									<p class="mt-2">{photo.alt_description}</p>
-									<a
-										href={photo.links.download}
-										target="_blank"
-										rel="noopener noreferrer"
-										class="text-black"
-									>
-										<Icon
-											name="download"
-											size={24}
-											class=" cursor-pointer hover:bg-black hover:text-white hover:p-2 rounded-full"
-										/>
-									</a>
-								</div>
-							</div>
-						))
-					}
-				</div>
-			</a>
 		</a>
-	</div></MainLayout
->
+		<h1 class="text-3xl mb-12">Example Unsplash Page</h1>
+		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+			{
+				photoList.map((photo: UnsplashPhoto) => (
+					<div class="border rounded-lg">
+						<img
+							src={photo.urls.small}
+							alt={photo.alt_description}
+							class="w-full h-64 object-cover rounded-lg"
+						/>
+						<div class="flex flex-row items-center justify-center gap-4 px-2">
+							<p class="mt-2">{photo.alt_description}</p>
+							<a
+								href={photo.links.download}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="text-black"
+							>
+								<Icon
+									name="download"
+									size={24}
+									class=" cursor-pointer hover:bg-black hover:text-white hover:p-2 rounded-full"
+								/>
+							</a>
+						</div>
+					</div>
+				))
+			}
+		</div>
+	</div>
+</MainLayout>