initial commit

app/components/CharacterCard.tsx

@@ -0,0 +1,63 @@
+"use client";
+import { useCharacter } from "../utils/useCharacter";
+import Image from "next/image"
+import { useEpisode } from "../utils/useEpisode";
+
+interface IProps {
+  characterId: string | number;
+}
+
+export const CharacterCard = (props: IProps) => {
+  const { character, isLoading, error } = useCharacter(props.characterId);
+
+  const firstEpisode = character?.episode[0];
+
+  const {
+    number: firstEpisodeNumber,
+  } = useEpisode(firstEpisode!);
+
+  return (
+    // <>
+    //   {isLoading && <p>Loading...</p>}
+    //   {error && <p>Something went wrong</p>}
+    //   {character && <p>Character Name: {character.name}</p>}
+    // </>
+    <article className="character-card h-full mx-2 sm:m-6 shadow-neutral-300/25 rounded-xl flex flex-col justify-around items-center  bg-cardBgColor">
+      <header className="text-center">
+        <h2 className="text-3xl">{character?.name}</h2>
+      </header>
+
+      <figure className="flex flex-col mb-1 w-11/12">
+        {character?.image && <Image
+          src={character.image}
+          width={500}
+          height={500}
+          alt={`Illustration of ${character?.name}`}
+        />}
+      </figure>
+
+      <section className="text-center px-2 flex flex-col gap-2 text-md">
+        <p>Origin: {character?.origin.name}</p>
+        <p>First seen in episode: {firstEpisodeNumber}</p>
+        <p>
+          Last known location: <br />
+          {character?.location.name}
+        </p>
+        <p>
+          Status: <br />{" "}
+          <span
+            className={
+              character?.status === "Dead"
+                ? "bg-red-600 p-1 rounded"
+                : character?.status === "Alive"
+                ? "bg-green-700 p-1 rounded"
+                : "bg-yellow-500 p-1 rounded"
+            }
+          >
+            {character?.status}
+          </span>
+        </p>
+      </section>
+    </article>
+  );
+};

app/components/CharactersPage.tsx

@@ -0,0 +1,47 @@
+"use client";
+import { useState } from "react";
+import { CharacterCard } from "../components/CharacterCard";
+import { useMultipleCharacters } from "../utils/useMultipleCharacters";
+import PageNavigation from "./PageNavigation";
+
+interface IProps {
+  pageNo: number;
+  setPageNo: React.Dispatch<React.SetStateAction<number>>;
+  searchQuery?: string
+}
+
+export const CharactersPage = (props: IProps) => {
+  const { characters, isLoading, error } = useMultipleCharacters(
+    "https://rickandmortyapi.com/api/character",
+    props.pageNo,
+    props.searchQuery
+  );
+
+  const lastPageNo = Math.ceil(characters?.info?.count! / 20);
+  return (
+    <>
+      <section className="flex items-center sm:items-stretch flex-row justify-around flex-wrap">
+        {characters?.results?.map((character) => (
+          <div key={character.id} className="w-10/12 md:w-1/4 my-6">
+            <CharacterCard characterId={character.id} />
+          </div>
+        ))}
+        {props.pageNo < lastPageNo - 1 &&
+          characters?.results?.map((character) => (
+            <div
+              // style={{ display: "none" }}
+              key={character.id}
+              className="hidden w-1/4 my-6"
+            >
+              <CharacterCard characterId={character.id + 20} />
+            </div>
+          ))}
+      </section>
+      <PageNavigation
+        pageNo={props.pageNo}
+        setPageNo={props.setPageNo}
+        lastPageNo={lastPageNo}
+      />
+    </>
+  );
+};

app/components/PageNavigation.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { containsOnlyDigits } from "../utils/containsOnlyDigits";
+
+type IProps = {
+  pageNo: number;
+  setPageNo: React.Dispatch<React.SetStateAction<number>>;
+  lastPageNo: number;
+};
+
+const PageNavigation = (props: IProps) => {
+  const [tempPageNo, setTempPageNo] = useState<number | string>(1);
+  const [originalPage, setOriginalPage] = useState<number | string>(tempPageNo);
+  return (
+    <nav
+      className="flex flex-row justify-between py-2 px-2 md:px-8 mt-10 mb-5 max-w-xl mx-auto rounded-xl bg-[#F9F4DA] text-[#231F20] shadow-[10px_10px_#231F20,11px_11px_#F9F4DA] border-2 border-[#F9F4DA] text-shadow-[
+  -1px_-1px_0_#666,
+  1px_-1px_0_#666,
+  -1px_1px_0_#666,
+  1px_1px_0_#666
+]"
+    >
+      <button
+        className="text-sm md:text-2xl px-2 md:px-4 py-1 rounded-md text-cardBgColor font-semibold"
+        onClick={() => {
+          if (Number(tempPageNo) > 1) {
+            setTempPageNo(Number(tempPageNo) - 1);
+            props.setPageNo(props.pageNo - 1);
+          }
+        }}
+      >
+        Prev
+      </button>
+      <div className="text-md md:text-2xl">
+        <span>
+          Page{" "}
+          <input
+            type="text"
+            accept="number"
+            maxLength={2}
+            value={tempPageNo}
+            onClick={(event) => {
+              setOriginalPage(tempPageNo);
+              setTempPageNo("");
+            }}
+            onChange={(event) => {
+              let userInput: string | number = event.target.value;
+
+              if (containsOnlyDigits(userInput)) {
+                userInput = Number(userInput);
+                setTempPageNo(userInput);
+              }
+            }}
+            onKeyDown={(event) => {
+              // setOriginalPage(tempPageNo)
+              if (event.key == "Backspace") {
+                if (String(tempPageNo).length <= 1) {
+                  console.log("now");
+                  setTempPageNo("");
+                  // setOriginalPage(1)
+                } else setTempPageNo(Number(String(tempPageNo).slice(0, -1)));
+              }
+              if (event.key === "Enter") {
+                if (Number(tempPageNo) <= props.lastPageNo) {
+                  if (Number(tempPageNo) === 0) {
+                    console.log("it's here");
+                    props.setPageNo(1);
+                    setOriginalPage(1);
+                    setTempPageNo(1);
+                  } else {
+                    props.setPageNo(Number(tempPageNo));
+                    setOriginalPage(tempPageNo);
+                  }
+                } else {
+                  props.setPageNo(props.lastPageNo);
+                  setTempPageNo(props.lastPageNo);
+                  setOriginalPage(props.lastPageNo);
+                }
+              }
+            }}
+            onBlur={() => setTempPageNo(originalPage)}
+            className="w-12 text-center text-2xl md:text-3xl bg-mainTextColor font-extrabold border-none rounded-md p-1"
+          />{" "}
+          of {Number.isNaN(props.lastPageNo) ? ". . ." : props.lastPageNo}
+        </span>
+      </div>
+      <button
+        className="text-sm md:text-2xl px-2 md:px-4 py-1 rounded-md text-cardBgColor font-semibold"
+        onClick={() => {
+          if (Number(tempPageNo) < props.lastPageNo) {
+            setTempPageNo(Number(tempPageNo) + 1);
+            props.setPageNo(props.pageNo + 1);
+          }
+        }}
+      >
+        Next
+      </button>
+    </nav>
+  );
+};
+
+export default PageNavigation;

app/globals.css

@@ -2,32 +2,52 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+@font-face {
+  font-family: 'Wellfleet';
+  src: url('/fonts/Wellfleet-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
 }
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background-color: #231F20;
+  text-shadow: 
+    -1px -1px 0 #000,
+     1px -1px 0 #000,
+    -1px  1px 0 #000,
+     1px  1px 0 #000;
+}
+
+.character-card {
+  box-shadow: 10px 10px #F9F4DA;
+  border: #F9F4DA 2px solid;
+  text-shadow: 
+    -1px -1px 0 #000,
+     1px -1px 0 #000,
+    -1px  1px 0 #000,
+     1px  1px 0 #000;
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
+
+
+nav>button {
+  box-shadow: 4px 4px #231F20;
+  border: #231F20 2px solid;
 }
+nav>div>span>input {
+  text-shadow: 
+    -1px -1px 0 #555,
+     1px -1px 0 #555,
+    -1px  1px 0 #555,
+     1px  1px 0 #555;
+}
+
+h1 {
+  color: #00DCF7;
+  text-shadow: 
+    -2px -2px 0 #000,
+     2px -2px 0 #000,
+    -2px  2px 0 #000,
+     2px  2px 0 #000;
+}

app/layout.tsx

@@ -1,12 +1,11 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import Head from "next/head"
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Rick & Morty Wiki",
+  description: "Explore all the different characters of the popular Rick and Morty Show",
 };
 
 export default function RootLayout({
@@ -16,7 +15,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <Head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" href="/favicon.ico" sizes="any" />
+        </Head>
+      <body style={{fontFamily: "Wellfleet, sans-serif"}} className="max-w-screen">{children}</body>
     </html>
   );
 }