Initial Commit

StephenStolk · Jan 21, 2024 · 972912a · 972912a
commit 972912a
Show file tree

Hide file tree

Showing 33 changed files with 5,217 additions and 0 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,19 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.addMissingImports": "explicit"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "svg.preview.background": "transparent"
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+# Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll & Framer Motion Animations
+
+![Anime Website](https://i.ibb.co/MG1nbqt/YT-Thumbnails-2.png)
+
+### [🌟 Become a top 1% Next.js 14 developer in only one course](https://jsmastery.pro/next14)
+### [🚀 Land your dream programming job in 6 months](https://jsmastery.pro/masterclass)
+### [📙 Free Three.js Cheatsheet](https://resource.jsmastery.pro/threejs-cheatsheet)
+### [🌐 Best Hosting for Your Websites](https://hostinger.com/javascript10)
+
diff --git a/app/_data.ts b/app/_data.ts
@@ -0,0 +1,145 @@
+export const data = [
+  {
+    id: "1",
+    name: "bleach",
+    image: {
+      original:
+        "https://m.media-amazon.com/images/M/MV5BZjE0YjVjODQtZGY2NS00MDcyLThhMDAtZGQwMTZiOWNmNjRiXkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_FMjpg_UX1000_.jpg",
+    },
+    kind: "TV",
+    episodes: 366,
+    episodes_aired: 366,
+    score: "7.92",
+  },
+  {
+    id: "2",
+    name: "black_clover",
+    image: {
+      original:
+        "https://m.media-amazon.com/images/M/MV5BNTAzYTlkMWEtOTNjZC00ZDU0LWI5ODUtYTRmYzY0MTAzYWZlXkEyXkFqcGdeQXVyMzgxODM4NjM@._V1_FMjpg_UX1000_.jpg",
+    },
+    kind: "TV",
+    episodes: 170,
+    episodes_aired: 170,
+    score: "7.16",
+  },
+  {
+    id: "3",
+    name: "dragon_ball",
+    image: {
+      original:
+        "https://m.media-amazon.com/images/M/MV5BMGMyOThiMGUtYmFmZi00YWM0LWJiM2QtZGMwM2Q2ODE4MzhhXkEyXkFqcGdeQXVyMjc2Nzg5OTQ@._V1_FMjpg_UX1000_.jpg",
+    },
+    kind: "TV",
+    episodes: 153,
+    episodes_aired: 153,
+    score: "8.68",
+  },
+  {
+    id: "4",
+    name: "jujutsu_kaisen",
+    image: {
+      original:
+        "https://static.wikia.nocookie.net/jujutsu-kaisen/images/8/88/Anime_Key_Visual_2.png/revision/latest?cb=20201212034001",
+    },
+    kind: "TV",
+    episodes: 24,
+    episodes_aired: 24,
+    score: "8.78",
+  },
+  {
+    id: "5",
+    name: "fma_brotherhood",
+    image: {
+      original:
+        "https://m.media-amazon.com/images/M/MV5BZmEzN2YzOTItMDI5MS00MGU4LWI1NWQtOTg5ZThhNGQwYTEzXkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_.jpg",
+    },
+    kind: "TV",
+    episodes: 64,
+    episodes_aired: 64,
+    score: "9.24",
+  },
+  {
+    id: "6",
+    name: "naruto",
+    image: {
+      original:
+        "https://m.media-amazon.com/images/M/MV5BZmQ5NGFiNWEtMmMyMC00MDdiLTg4YjktOGY5Yzc2MDUxMTE1XkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_.jpg",
+    },
+    kind: "TV",
+    episodes: 220,
+    episodes_aired: 220,
+    score: "8.3",
+  },
+  {
+    id: "7",
+    name: "gintama",
+    image: {
+      original:
+        "https://m.media-amazon.com/images/M/MV5BMDkxZTJjZTEtMDRjMy00Yzk1LWI5YjItMjIwYmVlYzhlZWZhXkEyXkFqcGdeQXVyNDQxNjcxNQ@@._V1_FMjpg_UX1000_.jpg",
+    },
+    kind: "TV",
+    episodes: 367,
+    episodes_aired: 367,
+    score: "9.0",
+  },
+  {
+    id: "9",
+    name: "one_piece",
+    image: {
+      original:
+        "https://m.media-amazon.com/images/M/MV5BODcwNWE3OTMtMDc3MS00NDFjLWE1OTAtNDU3NjgxODMxY2UyXkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_.jpg",
+    },
+    kind: "TV",
+    episodes: 1030,
+    episodes_aired: 1030,
+    score: "8.58",
+  },
+  {
+    id: "10",
+    name: "demon_slayer",
+    image: {
+      original:
+        "https://m.media-amazon.com/images/M/MV5BZjZjNzI5MDctY2Y4YS00NmM4LTljMmItZTFkOTExNGI3ODRhXkEyXkFqcGdeQXVyNjc3MjQzNTI@._V1_.jpg",
+    },
+    kind: "TV",
+    episodes: 26,
+    episodes_aired: 26,
+    score: "8.6",
+  },
+  {
+    id: "11",
+    name: "attack_on_titan",
+    image: {
+      original: "https://flxt.tmsimg.com/assets/p10701949_b_v8_ah.jpg",
+    },
+    kind: "TV",
+    episodes: 75,
+    episodes_aired: 75,
+    score: "9.16",
+  },
+  {
+    id: "12",
+    name: "hunter_x_hunter",
+    image: {
+      original:
+        "https://m.media-amazon.com/images/M/MV5BZjNmZDhkN2QtNDYyZC00YzJmLTg0ODUtN2FjNjhhMzE3ZmUxXkEyXkFqcGdeQXVyNjc2NjA5MTU@._V1_FMjpg_UX1000_.jpg",
+    },
+    kind: "TV",
+    episodes: 148,
+    episodes_aired: 148,
+    score: "9.1",
+  },
+  {
+    id: "13",
+    name: "boku_no_hero_academia",
+    image: {
+      original:
+        "https://i.pinimg.com/736x/0f/7f/ee/0f7feeb4655ffc029d1b9823bafb2ff8.jpg",
+    },
+    kind: "TV",
+    episodes: 114,
+    episodes_aired: 114,
+    score: "8.39",
+  },
+];
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  background-color: #000;
+}
+
+.red-gradient {
+  background: linear-gradient(92deg, #ff5956 2.87%, #ee1e38 96.18%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+:root {
+  color-scheme: dark;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { DM_Sans } from "next/font/google";
+
+import Front from "@/components/Front";
+import Footer from "@/components/Footer";
+
+import "./globals.css";
+import NavBar from "@/components/NavBar";
+
+const dmSans = DM_Sans({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Anime Vault",
+  description: "Your favorite anime, all in one place.",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={dmSans.className}>
+        <main className="max-w-7xl mx-auto bg-[#0F1117]">
+          <NavBar />
+          <Front />
+          {children}
+          <Footer />
+        </main>
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,20 @@
+import Card, { SeriesProp } from "@/components/AnimeCard";
+import Load from "../components/Load";
+import { data } from "./_data";
+
+async function Home() {
+  return (
+    <section className="sm:p-16 py-16 px-8 flex flex-col gap-10">
+      <h2 className="text-3xl text-white font-bold">Explore Anime</h2>
+
+      <section className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-10">
+        {data.map((item: SeriesProp, index) => (
+          <Card key={item.id} anime={item} index={index} />
+        ))}
+      </section>
+      <Load />
+    </section>
+  );
+}
+
+export default Home;
diff --git a/components/AnimeCard.tsx b/components/AnimeCard.tsx
@@ -0,0 +1,71 @@
+import Image from "next/image";
+
+export interface SeriesProp {
+  id: string;
+  name: string;
+  image: {
+    original: string;
+  };
+  kind: string;
+  episodes: number;
+  episodes_aired: number;
+  score: string;
+}
+
+interface Prop {
+  anime: SeriesProp;
+  index: number;
+}
+
+function Card({ anime }: Prop) {
+  return (
+    <div className="max-w-sm rounded relative w-full">
+      <div className="relative w-full h-[50vh]">
+        <Image
+          src={anime.image.original}
+          alt={anime.name}
+          fill
+          className="rounded-xl"
+        />
+      </div>
+      <div className="py-4 flex flex-col gap-3">
+        <div className="flex justify-between items-center gap-1">
+          <h2 className="font-bold text-white text-xl line-clamp-1 w-full">
+            {anime.name}
+          </h2>
+          <div className="py-1 px-2 bg-[#161921] rounded-sm">
+            <p className="text-white text-sm font-bold capitalize">
+              {anime.kind}
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-4 items-center">
+          <div className="flex flex-row gap-2 items-center">
+            <Image
+              src="./episodes.svg"
+              alt="episodes"
+              width={20}
+              height={20}
+              className="object-contain"
+            />
+            <p className="text-base text-white font-bold">
+              {anime.episodes || anime.episodes_aired}
+            </p>
+          </div>
+          <div className="flex flex-row gap-2 items-center">
+            <Image
+              src="./star.svg"
+              alt="star"
+              width={18}
+              height={18}
+              className="object-contain"
+            />
+            <p className="text-base font-bold text-[#FFAD49]">{anime.score}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Card;