26 |
31 |
32 | );
33 | };
34 |
35 | export default Page;
36 |
--------------------------------------------------------------------------------
/src/app/search/[keyword]/page.jsx:
--------------------------------------------------------------------------------
1 | import { getAnimeResponse } from "@/libs/api-libs"
2 | import AnimeList from "@/components/AnimeList"
3 | import Header from "@/components/AnimeList/Header"
4 |
5 | const Page = async ({ params }) => {
6 | const { keyword } = params
7 |
8 | const decodedKeyword = decodeURI(keyword)
9 | const searchAnime = await getAnimeResponse("anime", `q=${decodedKeyword}`)
10 |
11 | return (
12 | <>
13 |
17 |
18 | )
19 | }
20 |
21 | export default Page
22 |
--------------------------------------------------------------------------------
/src/app/users/dashboard/collection/page.jsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import Link from "next/link";
3 | import Header from "@/components/Dashboard/Header";
4 | import { authUserSession } from "@/libs/auth-libs";
5 | import prisma from "@/libs/prisma";
6 |
7 | const Page = async () => {
8 | const user = await authUserSession();
9 | const collection = await prisma.collection.findMany({
10 | where: { user_email: user.email },
11 | });
12 |
13 | return (
14 |
15 |
16 |
17 | {collection.map((collect, index) => {
18 | return (
19 |
20 |
27 |
28 |
{collect.anime_title}
29 |
30 |
31 | );
32 | })}
33 |
15 | {comments.map(comment => {
16 | return (
17 |
22 |
{comment.anime_title}
23 |
{comment.comment}
24 |
25 | )
26 | })}
27 |
10 |
Welcome, {user?.name}
11 |
12 |
13 |
17 | My Collection
18 |
19 |
23 | My Comment
24 |
25 |
26 | Berhasil Ditambahkan Ke Koleksi
30 | :
31 |
36 | }
37 |
38 | )
39 | }
40 |
41 | export default CollectionButton
--------------------------------------------------------------------------------
/src/components/AnimeList/CommentBox.jsx:
--------------------------------------------------------------------------------
1 | import prisma from '@/libs/prisma'
2 | import React from 'react'
3 |
4 | const CommentBox = async ({ anime_mal_id }) => {
5 | const comments = await prisma.comment.findMany({ where: { anime_mal_id } });
6 |
7 | return (
8 |
9 | {comments.map(comment => {
10 | return (
11 |
12 |
{comment.username}
13 |
{comment.comment}
14 |
15 | )
16 | })}
17 |
36 | {isCreated &&
postingan terkirim...
}
37 |
38 |
42 |
43 |
6 |
{title}
7 | {
8 | linkHref && linkTitle
9 | ?
10 |
11 | {linkTitle}
12 |
13 | :
14 | null
15 | }
16 |
17 |
18 | )
19 | }
20 | export default Header
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/components/AnimeList/index.jsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image"
2 | import Link from "next/link"
3 |
4 | const AnimeList = ({ api }) => {
5 | return (
6 |
7 | {api.data?.map((anime, index) => {
8 | return (
9 |
13 |
20 |
{anime.title}
21 |
22 | )
23 | })}
24 |
25 | )
26 | }
27 |
28 | export default AnimeList
--------------------------------------------------------------------------------
/src/components/Dashboard/Header.jsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { ArrowSquareLeft } from "@phosphor-icons/react"
3 | import { useRouter } from "next/navigation"
4 |
5 | const Header = ({ title }) => {
6 | const router = useRouter()
7 |
8 | const handleBack = (event) => {
9 | event.preventDefault()
10 | router.back()
11 | }
12 |
13 | return (
14 |
15 |
18 |
19 | {title}
20 |
21 |
24 |
30 |
33 |
34 | )
35 | }
36 |
37 | export default InputSearch
--------------------------------------------------------------------------------
/src/components/Navbar/UserActionButton.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 | import { authUserSession } from "@/libs/auth-libs"
3 |
4 | const UserActionButton = async() => {
5 | const user = await authUserSession();
6 |
7 | const actionLabel = user ? "Sign Out" : "Sign In"
8 | const actionURL = user ? "/api/auth/signout" : "/api/auth/signin"
9 |
10 | return (
11 |
12 | {
13 | user ? Dashboard : null
14 | }
15 | {actionLabel}
16 |
17 | )
18 | }
19 |
20 | export default UserActionButton
--------------------------------------------------------------------------------
/src/components/Navbar/index.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link"
2 | import InputSearch from "./InputSearch"
3 | import UserActionButton from "./UserActionButton"
4 |
5 | const Navbar = () => {
6 | return (
7 |
14 | )
15 | }
16 |
17 | export default Navbar
--------------------------------------------------------------------------------
/src/components/Utilities/HeaderMenu.jsx:
--------------------------------------------------------------------------------
1 | const HeaderMenu = ({ title }) => {
2 | return (
3 |
8 | )
9 | }
10 |
11 | export default HeaderMenu
--------------------------------------------------------------------------------
/src/components/Utilities/Pagination.jsx:
--------------------------------------------------------------------------------
1 | const Pagination = ({ page, lastPage, setPage }) => {
2 |
3 | const scrollTop = () => {
4 | scrollTo({
5 | behavior: "smooth",
6 | top: 0
7 | })
8 | }
9 |
10 | const handleNextPage = () => {
11 | setPage((prevState) => prevState + 1)
12 | scrollTop()
13 | }
14 |
15 | const handlePrevPage = () => {
16 | setPage((prevState) => prevState - 1)
17 | scrollTop()
18 | }
19 |
20 | return (
21 |
22 | { page <= 1 ? null :
23 |
24 | }
25 |
26 |
{page} of {lastPage}
27 |
28 | { page >= lastPage ? null :
29 |
30 | }
31 |
21 |
27 | event.target.pauseVideo()}
30 | opts={option}
31 | onError={() => alert("Video is broken, please try another.")}
32 | />
33 |
34 | )
35 | }
36 |
37 | const ButtonOpenPlayer = () => {
38 | return (
39 |
45 | )
46 | }
47 |
48 | return isOpen ? :
49 | }
50 |
51 | export default VideoPlayer
--------------------------------------------------------------------------------
/src/libs/api-libs.js:
--------------------------------------------------------------------------------
1 | export const getAnimeResponse = async(resource, query) => {
2 | const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/${resource}?${query}`)
3 | const anime = await response.json()
4 | return anime
5 | }
6 |
7 | export const getNestedAnimeResponse = async(resource, objectProperty) => {
8 | const response = await getAnimeResponse(resource)
9 | return response.data.flatMap(item => item[objectProperty])
10 | }
11 |
12 | export const reproduce = (data, gap) => {
13 | const first = ~~(Math.random() * (data.length - gap) + 1)
14 | const last = first + gap
15 |
16 | const response = {
17 | data: data.slice(first, last)
18 | }
19 |
20 | return response
21 | }
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/libs/auth-libs.js:
--------------------------------------------------------------------------------
1 | import { getServerSession } from "next-auth"
2 | import { authOption } from "@/app/api/auth/[...nextauth]/route"
3 |
4 | export const authUserSession = async() => {
5 | const session = await getServerSession(authOption)
6 | return session?.user
7 | }
--------------------------------------------------------------------------------
/src/libs/prisma.js:
--------------------------------------------------------------------------------
1 | import { PrismaClient } from '@prisma/client';
2 |
3 | let prisma;
4 |
5 | if (process.env.NODE_ENV === 'production') {
6 | prisma = new PrismaClient();
7 | } else {
8 | if (!global.prisma) {
9 | global.prisma = new PrismaClient();
10 | }
11 | prisma = global.prisma;
12 | }
13 |
14 | export default prisma;
--------------------------------------------------------------------------------
/src/middleware.js:
--------------------------------------------------------------------------------
1 | export { default } from "next-auth/middleware"
2 |
3 | export const config = { matcher: ["/users/:path*"] }
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
5 | './src/components/**/*.{js,ts,jsx,tsx,mdx}',
6 | './src/app/**/*.{js,ts,jsx,tsx,mdx}',
7 | ],
8 | theme: {
9 | extend: {
10 | backgroundImage: {
11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 | 'gradient-conic':
13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 | },
15 | },
16 | colors: {
17 | color: {
18 | primary: '#eeeeee',
19 | accent: '#ffc639',
20 | secondary: '#393e46',
21 | dark: '#222831'
22 | }
23 | }
24 | },
25 | plugins: [],
26 | }
27 |
--------------------------------------------------------------------------------