aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json9
-rw-r--r--package.json1
-rw-r--r--src/app/anime/page.js2
-rw-r--r--src/app/info/[id]/page.js10
-rw-r--r--src/app/info/info.css16
-rw-r--r--src/app/info/page.js10
-rw-r--r--src/app/kdrama/kdrama.css1
-rw-r--r--src/app/kdrama/page.js4
-rw-r--r--src/app/recent/page.js1
-rw-r--r--src/app/search/page.js75
-rw-r--r--src/app/search/search.css79
-rw-r--r--src/app/top-airing/page.js1
12 files changed, 199 insertions, 10 deletions
diff --git a/package-lock.json b/package-lock.json
index c048d03..99e3bd6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
"next": "14.1.3",
"react": "^18",
"react-dom": "^18",
+ "react-icons": "^5.0.1",
"react-player": "^2.15.1",
"react-router-dom": "^6.22.3"
},
@@ -3263,6 +3264,14 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
"integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
},
+ "node_modules/react-icons": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+ "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+ "peerDependencies": {
+ "react": "*"
+ }
+ },
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index ad82686..32c9f29 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"next": "14.1.3",
"react": "^18",
"react-dom": "^18",
+ "react-icons": "^5.0.1",
"react-player": "^2.15.1",
"react-router-dom": "^6.22.3"
},
diff --git a/src/app/anime/page.js b/src/app/anime/page.js
index 964bba5..06ea86f 100644
--- a/src/app/anime/page.js
+++ b/src/app/anime/page.js
@@ -1,10 +1,12 @@
import './anime.css'
import Trending from '../top-airing/page'
import Releases from '../recent/page'
+import Input from '../search/page'
export default async function Anime() {
return (
<div>
+ <Input />
<Trending />
<Releases />
</div>
diff --git a/src/app/info/[id]/page.js b/src/app/info/[id]/page.js
index 43b11ac..9d37819 100644
--- a/src/app/info/[id]/page.js
+++ b/src/app/info/[id]/page.js
@@ -27,11 +27,11 @@ export default async function AnimeInfo({params}) {
</div>
)}
- <div className="buttonContainer">
- {info && info.episodes.map((item, index) => (
- <CreateButton key={index} a={item} />
- ))}
- </div>
+ <div className="buttonContainer">
+ {info && info.episodes.map((item, index) => (
+ <CreateButton key={index} a={item} />
+ ))}
+ </div>
</div>
</div>
diff --git a/src/app/info/info.css b/src/app/info/info.css
index 6d6b9b2..cf24758 100644
--- a/src/app/info/info.css
+++ b/src/app/info/info.css
@@ -60,8 +60,24 @@
background-color: var(--soft-purple);
}
+.infoPageContainer {
+ display: flex;
+ height: 100dvh;
+ justify-content: center;
+ align-items: center;
+}
+
+.infoPageContainer p {
+ color: white;
+}
+
@media (prefers-color-scheme: light) {
.dramaDescription {
color: black;
}
+
+ .infoPageContainer p {
+ color: black;
+ }
+
} \ No newline at end of file
diff --git a/src/app/info/page.js b/src/app/info/page.js
index 6353b1a..1468652 100644
--- a/src/app/info/page.js
+++ b/src/app/info/page.js
@@ -1,7 +1,11 @@
+import './info.css'
+
export default function Info() {
return (
- <h2>
- Hello
- </h2>
+ <div className='infoPageContainer'>
+ <p>
+ This is the anime info page. This page will display information about the queried anime when anime id is passed along the url.
+ </p>
+ </div>
)
} \ No newline at end of file
diff --git a/src/app/kdrama/kdrama.css b/src/app/kdrama/kdrama.css
index 4e0754c..014083e 100644
--- a/src/app/kdrama/kdrama.css
+++ b/src/app/kdrama/kdrama.css
@@ -89,6 +89,7 @@
.popupEntry img {
width: 120px;
+ height: "auto";
padding: 5px;
border-radius: 10px;
diff --git a/src/app/kdrama/page.js b/src/app/kdrama/page.js
index 3f0eee6..fdd42c7 100644
--- a/src/app/kdrama/page.js
+++ b/src/app/kdrama/page.js
@@ -61,9 +61,9 @@ export default function Kdrama() {
<p className="introText">
Start by searching for some dramas
</p>
- <h7 className="introText2">
+ <p className="introText2">
Look for the search box above.
- </h7>
+ </p>
</div>
<div className="videoContainer" id="videoContainer">
diff --git a/src/app/recent/page.js b/src/app/recent/page.js
index 6f4e3cd..0cefca5 100644
--- a/src/app/recent/page.js
+++ b/src/app/recent/page.js
@@ -22,6 +22,7 @@ export default async function Releases() {
width={160}
height={220}
alt="Drama"
+ priority
/>
<p>
{item.title}
diff --git a/src/app/search/page.js b/src/app/search/page.js
new file mode 100644
index 0000000..cb571b3
--- /dev/null
+++ b/src/app/search/page.js
@@ -0,0 +1,75 @@
+"use client"
+
+import './search.css'
+import { FaSearch } from 'react-icons/fa'; // Import the search icon from react-icons library
+import { useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function Input() {
+
+ const [searchedAnime, setSearchedAnime] = useState(null)
+
+ const handleKeyPress = (event) => {
+ if (
+ (event.code === "Enter" ||
+ event.key === "Enter" ||
+ event.code === 13) &&
+ searchedAnime != ""
+ ) {
+ fetch_animes(searchedAnime)
+ } else if (
+ (event.code === "Enter" ||
+ event.key === "Enter" ||
+ event.code === 13) &&
+ searchedAnime === ""
+ ) {
+ alert("Input cannot be empty")
+ }
+ }
+
+ const [search1, setSearch] = useState(null);
+ const fetch_animes = (title) => {
+ fetch("https://dramalama-api.vercel.app/anime/gogoanime/" + title)
+ .then(res => res.json())
+ .then(
+ data => {
+ setSearch(data)
+ console.log(search1)
+ }
+ )
+ }
+
+ return (
+ <div>
+ <div className='inputContainer'>
+ <div className='searchContainer'>
+ <FaSearch className='searchIcon' />
+ <input
+ onChange={(event) => setSearchedAnime(event.target.value)}
+ onKeyDown={(event) => handleKeyPress(event)}
+ placeholder='Enter anime title'>
+
+ </input>
+ </div>
+ </div>
+
+ <div className='animeEntry'>
+ {search1 && search1.results.map((item, index) => (
+ <Link href={`/info/${item.id}`} style={{textDecoration: "none"}}>
+ <div key={index} className='anime'>
+ <p>{item.title}</p>
+ <Image
+ src={item.image}
+ className='animeImage'
+ width={120}
+ height={160}
+ />
+ </div>
+ </Link>
+ ))}
+ </div>
+ </div>
+
+ )
+} \ No newline at end of file
diff --git a/src/app/search/search.css b/src/app/search/search.css
new file mode 100644
index 0000000..d24293e
--- /dev/null
+++ b/src/app/search/search.css
@@ -0,0 +1,79 @@
+.inputContainer {
+ display: flex;
+ margin: 30px auto;
+}
+
+.searchContainer input {
+ border: none;
+ border-radius: 5px;
+ color: white;
+ outline: none;
+ background: none;
+ width: 100%;
+ font-family: "Lato";
+ font-size: 16px;
+}
+
+.searchContainer {
+ display: flex;
+ align-items: center;
+ margin: 0px auto;
+ background-color: #2c2c2c;
+ padding: 8px;
+ border-radius: 5px;
+ width: 20%;
+}
+
+.searchIcon {
+ color: white;
+ margin-right: 5px;
+}
+
+.animeEntry {
+ display: flex;
+ overflow-x: auto;
+}
+
+.animeEntry::-webkit-scrollbar {
+ height: 7px;
+}
+
+.animeEntry::-webkit-scrollbar-track {
+ background-color: #636363;
+ border-radius: 5px;
+}
+
+.animeEntry::-webkit-scrollbar-thumb {
+ background-color: rgba(196, 196, 196, 0.692);
+ border-radius: 5px;
+
+}
+
+.anime {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+ border-style: dotted;
+ border-color: #636363;
+ margin: 10px;
+ border-radius: 10px;
+ border-width: 4px;
+}
+
+.anime p {
+ color: white;
+ width: 25vh;
+ font-family: "Lato";
+ font-size: 18px;
+}
+
+.animeImage {
+ border-radius: 10px;
+}
+
+@media screen and (max-width: 768px) {
+ .searchContainer {
+ width: 70%;
+ }
+} \ No newline at end of file
diff --git a/src/app/top-airing/page.js b/src/app/top-airing/page.js
index e56435f..e564e16 100644
--- a/src/app/top-airing/page.js
+++ b/src/app/top-airing/page.js
@@ -22,6 +22,7 @@ export default async function Trending() {
width={160}
height={220}
alt="Drama"
+ priority
/>
<p>
{item.title}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-05 01:49:23 +0000