diff --git a/README.md b/README.md index c4567b8a..9e2111b1 100644 --- a/README.md +++ b/README.md @@ -13,12 +13,12 @@ Project of animes and mangas website, utilizing the diff --git a/app/layout/header/components/NavListMenu/index.tsx b/app/layout/header/components/NavListMenu/index.tsx index c622d1f5..fde914f7 100644 --- a/app/layout/header/components/NavListMenu/index.tsx +++ b/app/layout/header/components/NavListMenu/index.tsx @@ -118,7 +118,16 @@ function NavListMenu() {
  • Highest Rated
    • - {/*
  • Movies
    • */} + +
  • + +
    + News +
    + +
    • diff --git a/app/layout/header/components/NewsNavListHover/component.module.css b/app/layout/header/components/NewsNavListHover/component.module.css new file mode 100644 index 00000000..da4e6521 --- /dev/null +++ b/app/layout/header/components/NewsNavListHover/component.module.css @@ -0,0 +1,123 @@ +#news_header_nav_container { + + z-index: 2; + position: absolute; + top: 69px; + left: 0; + + padding-top: 32px; + padding-bottom: 64px; + padding-left: 64px; + padding-right: 64px; + + background-color: var(--black-100); + + width: 100%; + + +} + +#news_header_nav_container .link_container { + + max-width: var(--breakpoint-xxl); + margin: auto; + margin-bottom: 32px; + + +} + +#news_header_nav_container .link_container a { + + width: fit-content; + + border-bottom: 2px solid var(--white-75); + +} + +#news_header_nav_container>ul { + + max-width: var(--breakpoint-xxl); + margin: auto; + + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 0 32px; + +} + +#news_header_nav_container>ul[data-loading=true] { + + display: flex; + align-items: center; + justify-content: center; + +} + + +#news_header_nav_container>ul>li { + + padding-top: 32px; + padding-right: 32px; + +} + +#news_header_nav_container>ul>li:not(:nth-child(5)):not(:last-child) { + + border-right: 1px solid var(--white-50); + +} + +#news_header_nav_container>ul>li .image_container { + + aspect-ratio: 16/9; + position: relative; + +} + +#news_header_nav_container>ul>li .image_container img { + + object-fit: cover; + + border-radius: 4px; + +} + +#news_header_nav_container>ul>li .title_container { + + margin-top: 8px; + +} + +#news_header_nav_container>ul>li .title_container a { + + transition: all ease-in-out 300ms; + + font-size: var(--font-size--small-1); + color: var(--white-100); + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + +} + +#news_header_nav_container>ul>li:hover .title_container a { + + color: var(--brand-color); + +} + +#news_header_nav_container>ul>li .title_container small { + + display: flex; + align-items: center; + gap: 0 4px; + + width: max-content; + + color: var(--white-75); + margin-top: 8px; + margin-left: auto; + +} \ No newline at end of file diff --git a/app/layout/header/components/NewsNavListHover/index.tsx b/app/layout/header/components/NewsNavListHover/index.tsx new file mode 100644 index 00000000..9552b2db --- /dev/null +++ b/app/layout/header/components/NewsNavListHover/index.tsx @@ -0,0 +1,66 @@ +"use client" +import React, { useLayoutEffect, useState } from 'react' +import styles from "./component.module.css" +import Link from 'next/link' +import LoadingSvg from "@/public/assets/ripple-1s-200px.svg" +import news from '@/api/news' +import { News } from '@/app/ts/interfaces/newsInterface' +import SvgCalendar from "@/public/assets/calendar3.svg" +import Image from 'next/image' + +function AnimeNavListHover() { + + const [animeData, setAnimeData] = useState() + + const loadData = async () => { + + const data = await news.getNews() as News[] + + setAnimeData(data) + + } + + useLayoutEffect(() => { + loadData() + }, []) + + return ( +
    + +
    + Go to News Page +
    + +
      + + {animeData ? ( + + animeData.slice(0, 10).map((item, key) => ( +
    • + +
      + + {item.title} + +
      + +
      + +
      {item.title}
      + + {item.uploadedAt} + +
      + +
      • + )) + ) : ( + + )} + +
    +
    + ) +} + +export default AnimeNavListHover \ No newline at end of file diff --git a/app/layout/header/headerComponent.module.css b/app/layout/header/headerComponent.module.css index 24533bc4..bca2adb4 100644 --- a/app/layout/header/headerComponent.module.css +++ b/app/layout/header/headerComponent.module.css @@ -36,12 +36,6 @@ header>div#container { } } -/* @media((min-width: 992px) and (max-width: 1200px)) { - header>div#container { - width: var(--breakpoint-md); - } -} */ - @media((min-width: 1201px) and (max-width: 1400px)) { header>div#container { width: var(--breakpoint-xl); @@ -155,7 +149,8 @@ header#background button svg { } -#navbar_container>ul>li>ul { +#navbar_container>ul>li>ul, +#navbar_container>ul>li>div { display: none; } @@ -168,7 +163,8 @@ header#background button svg { } -#navbar_container>ul>li:hover>ul { +#navbar_container>ul>li:hover>ul, +#navbar_container>ul>li:hover>div { display: block; diff --git a/app/layout/header/index.tsx b/app/layout/header/index.tsx index 40b5ec4f..270bf7f2 100644 --- a/app/layout/header/index.tsx +++ b/app/layout/header/index.tsx @@ -8,6 +8,7 @@ import MangaNavListHover from './components/MangaNavListHover' import UserSideMenu from './components/UserSideMenu' import NavListMenu from './components/NavListMenu' import SearchContainer from './components/SearchContainer' +import NewsNavListHover from './components/NewsNavListHover' function Header() { @@ -41,8 +42,10 @@ function Header() { -
  • - News +
  • + News + +
    • diff --git a/app/news/[date]/[newsTitle]/[id]/page.module.css b/app/news/[date]/[newsTitle]/[id]/page.module.css new file mode 100644 index 00000000..6965f604 --- /dev/null +++ b/app/news/[date]/[newsTitle]/[id]/page.module.css @@ -0,0 +1,134 @@ +#container { + + margin-top: 32px; + margin-bottom: 32px; + margin-left: auto; + margin-right: auto; + + display: grid; + + width: 96%; + + max-width: var(--breakpoint-sm); + +} + +@media((min-width: 768px)) { + #container { + max-width: var(--breakpoint-md); + } +} + +@media((min-width: 1020px)) { + #container { + max-width: var(--breakpoint-xl); + gap: 32px; + grid-template-columns: 3fr 1fr; + } +} + +@media((min-width: 1480px)) { + #container { + + width: auto; + max-width: var(--breakpoint-xxl); + + } +} + +#heading_container h1 { + + font-family: var(--font-family-sans-sarif); + color: var(--white-100); +} + +#img_intro_container { + + margin: 32px 0; + + display: grid; + grid-template-columns: 1fr; + align-items: center; + + gap: 16px; + +} + +@media((min-width: 440px)) { + #img_intro_container { + grid-template-columns: 120px 1fr; + } +} + +#img_container { + + overflow: hidden; + border-radius: 4px; + + position: relative; + + aspect-ratio: 9/12; + +} + +#img_intro_container small { + + padding: 16px 32px; + + background-color: var(--brand-color); + + font-size: var(--font-size--p); + font-weight: 800; + + color: var(--white-100); + +} + +#main_text_container p { + + color: var(--white-100); + + line-height: 1.5; + + font-family: var(--font-family-sans-sarif); + font-weight: 300; + font-size: calc(var(--font-size--p) + 1px); + +} + +#footer_container { + + margin: 32px 0; + + display: flex; + flex-direction: column; + + gap: 16px; + +} + +#footer_container small { + + color: var(--white-100); + font-weight: 300; + +} + +#footer_container small a { + + color: var(--brand-color); + +} + +#footer_container small a:hover { + + text-decoration: underline; + +} + +/* OTHER NEWS */ +#other_news_container>ul>li:not(:last-child) { + + border-bottom: 1px solid var(--white-50); + +} \ No newline at end of file diff --git a/app/news/[date]/[newsTitle]/[id]/page.tsx b/app/news/[date]/[newsTitle]/[id]/page.tsx new file mode 100644 index 00000000..92f8fa5d --- /dev/null +++ b/app/news/[date]/[newsTitle]/[id]/page.tsx @@ -0,0 +1,86 @@ +import news from '@/api/news' +import { News, NewsArcticle } from '@/app/ts/interfaces/newsInterface' +import React from 'react' +import styles from "./page.module.css" +import Link from 'next/link' +import Image from 'next/image' +import NewsCard1 from '@/app/news/components/NewsCard1' + +export async function generateMetadata({ params }: { params: { id: string } }) { + + const newsData = await news.getNewsInfo(params.id) as NewsArcticle + + return { + title: `${newsData.title} | AniProject`, + description: newsData.intro, + } +} + +async function NewPage({ params }: { params: { id: string } }) { + + const newsData = await news.getNewsInfo(params.id) as NewsArcticle + const otherNews = await news.getNews() as News[] + + return ( +
    + +
    + +
    + +

    {newsData.title}

    + +
    + +
    + {newsData.intro} +
    + + {newsData.intro} + +
    + +
    + +
    + +

    {newsData.description}

    + +
    + +
    + + Source: Anime News Network + + + {new Date(`${newsData.uploadedAt}`).toLocaleString( + 'default', + { month: 'long', day: "numeric", year: "numeric", hour: 'numeric', minute: '2-digit' } + )} + + +
    + +
    + +
    + +
      + {otherNews.slice(0, 7).map((item, key) => ( + +
    • +
      + +
      +
      • + + ))} +
    + +
    + +
    + ) +} + +export default NewPage \ No newline at end of file diff --git a/app/news/components/NewsCard1/component.module.css b/app/news/components/NewsCard1/component.module.css new file mode 100644 index 00000000..42138edf --- /dev/null +++ b/app/news/components/NewsCard1/component.module.css @@ -0,0 +1,71 @@ +.hero_news_container { + + padding: 16px 0; + + display: grid; + grid-template-columns: 1fr 3fr; + gap: 16px; + +} + +.hero_news_container .image_container { + overflow: hidden; + position: relative; + + aspect-ratio: 16/15; + + border-radius: 8px; + overflow: hidden; + +} + +.hero_news_container .image_container img { + transition: all ease-in-out 100ms; + object-fit: cover; +} + +.hero_news_container:hover .image_container img { + + transform: scale(1.1); + +} + +.topic { + + width: min-content; + + display: block; + + margin-bottom: 8px; + + padding: 8px 16px; + background-color: var(--white-100); + + border-radius: 4px; + + font-weight: 400; + font-size: var(--font-size--small-2); +} + +.highlight_title h2 a { + + transition: all ease-in-out 300ms; + + line-height: 1.4; + + font-family: var(--font-family-sans-serif); + font-weight: 600; + color: var(--white-100); + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + +} + +.highlight_title h2:hover a { + + color: var(--brand-color); + +} \ No newline at end of file diff --git a/app/news/components/NewsCard1/index.tsx b/app/news/components/NewsCard1/index.tsx new file mode 100644 index 00000000..fac1a934 --- /dev/null +++ b/app/news/components/NewsCard1/index.tsx @@ -0,0 +1,30 @@ +import Link from 'next/link' +import React from 'react' +import styles from "./component.module.css" +import Image from 'next/image' +import { News } from '@/app/ts/interfaces/newsInterface' + +function NewsCard1({ data }: { data: News }) { + return ( +
    + +
    + + {data.title} + +
    + +
    + {data.topics[0] && ( + {data.topics[0].toUpperCase()} + )} + +

    + {data.title} +

    +
    +
    + ) +} + +export default NewsCard1 \ No newline at end of file diff --git a/app/news/components/SwiperContainer/component.module.css b/app/news/components/SwiperContainer/component.module.css new file mode 100644 index 00000000..5e83722b --- /dev/null +++ b/app/news/components/SwiperContainer/component.module.css @@ -0,0 +1,76 @@ +.list_container { + overflow: hidden; + width: 100%; +} + +.list_container>div { + display: flex; + flex-direction: row; +} + +.custom_list_item>* { + + height: inherit; + width: inherit !important; + +} + +.news_container { + + position: relative; + height: 480px; + overflow: hidden; + border-radius: 12px; +} + +.img_container img { + + object-fit: cover; + +} + +.title_container { + + position: absolute; + + bottom: 16px; + z-index: 1; + + margin: 16px; + padding: 16px; + + border-radius: 12px; + + background-color: var(--white-100); + +} + +.topic { + + width: min-content; + + display: block; + + margin-bottom: 16px; + + padding: 8px 16px; + background-color: var(--black-05); + + border-radius: 4px; + + font-weight: 400; + font-size: var(--font-size--small-2); +} + +.title_container h3 a { + + line-height: 1.4; + + font-family: var(--font-family-sans-serif); + font-weight: 700; + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; +} \ No newline at end of file diff --git a/app/news/components/SwiperContainer/index.tsx b/app/news/components/SwiperContainer/index.tsx new file mode 100644 index 00000000..0f2a62e9 --- /dev/null +++ b/app/news/components/SwiperContainer/index.tsx @@ -0,0 +1,59 @@ +"use client" +import React from 'react' +import { Swiper, SwiperSlide } from "swiper/react"; +import { A11y, Navigation, Pagination } from 'swiper/modules'; +import styles from "./component.module.css" +import Image from 'next/image'; +import Link from 'next/link'; +import { News } from '@/app/ts/interfaces/newsInterface'; + +function SwiperContainer({ data, options }: { + data?: News[], + options?: { + slidesPerView?: number + bp480: number, + bp740: number, + bp1275: number, + } +}) { + + return ( + + + {data?.map((item, key: number) => ( + + + +
    + +
    + {item.title} +
    + +
    + + {item.topics[0].toUpperCase()} + +

    {item.title}

    + +
    +
    +     + + ))} + +     + ); +} + +export default SwiperContainer \ No newline at end of file diff --git a/app/news/page.module.css b/app/news/page.module.css new file mode 100644 index 00000000..9dadea4b --- /dev/null +++ b/app/news/page.module.css @@ -0,0 +1,461 @@ +#container { + + margin-top: 32px; + margin-bottom: 32px; + margin-left: auto; + margin-right: auto; + + width: 96%; + max-width: var(--breakpoint-sm); + + gap: 32px; + +} + +@media((min-width: 768px)) { + #container { + max-width: var(--breakpoint-md); + } +} + +@media((min-width: 860px)) { + #container { + width: 100%; + margin: auto; + margin-top: 64px; + margin-bottom: 64px; + } +} + +@media((min-width: 1020px)) { + #container { + width: 96%; + max-width: var(--breakpoint-xl); + } +} + +@media((min-width: 1280px)) { + #container { + width: 100%; + } +} + +#container>h1 { + + font-size: var(--font-size--h4); + background-color: var(--brand-color); + + color: var(--white-100); + + width: fit-content; + + margin-bottom: 32px; + + padding: 8px 16px; + +} + +/* HIGHLIGHT */ +#container #highlight { + + display: grid; + grid-template-columns: 1fr; + gap: 32px; + +} + +@media(min-width: 1020px) { + + #container #highlight { + + grid-template-columns: 2fr 1fr; + + } + +} + +#container #highlight { + + padding-bottom: 24px; + border-bottom: 1px solid var(--white-50); + +} + +#highlighted_news { + + display: flex; + flex-direction: column; + gap: 16px; + +} + +#highlighted_news #main_news { + position: relative; + background-color: var(--black-100); + + display: grid; + grid-template-columns: 1fr; + +} + +@media(min-width: 520px) { + #highlighted_news #main_news { + grid-template-columns: 35% 1fr; + } +} + + +#highlighted_news #main_news .image_container { + + overflow: hidden; + position: relative; + aspect-ratio: 400/583; + +} + +#highlighted_news #main_news .image_container img { + object-fit: cover; + + transition: all ease-in-out 100ms; +} + +@media(min-width: 600px) { + #highlighted_news #main_news .image_container { + min-height: 420px; + } +} + +#highlighted_news #main_news:hover .image_container img { + + transform: scale(1.1); + +} + +#highlighted_news #main_news .highlight_title { + position: absolute; + + right: 8px; + left: 8px; + bottom: 32px; + +} + +@media(min-width: 520px) { + #highlighted_news #main_news .highlight_title { + left: 170px; + } +} + +@media(min-width: 600px) { + #highlighted_news #main_news .highlight_title { + left: 320px; + } +} + +.topic { + + width: min-content; + + display: block; + + margin-bottom: 16px; + + padding: 8px 16px; + background-color: var(--white-100); + + border-radius: 4px; + + font-weight: 400; + font-size: var(--font-size--small-2); +} + +#highlighted_news #main_news .highlight_title h2 a { + + display: block; + + color: var(--white-100); + + font-family: var(--font-family-sans-serif); + font-size: var(--font-size--h4); + font-weight: 600; + +} + +/* */ + +#news_second { + + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 32px; + +} + +#news_second .hero_news_container { + display: flex; + flex-direction: column; + align-items: center; +} + +#news_second .hero_news_container .image_container { + + overflow: hidden; + + position: relative; + + aspect-ratio: 16/9; + + width: 100%; + + border-radius: 8px; + overflow: hidden; +} + + +#news_second .hero_news_container .image_container img { + + transition: all ease-in-out 100ms; + + object-fit: cover; +} + +@media(min-width: 780px) { + #news_second .hero_news_container .image_container { + min-height: 120px; + height: auto; + } +} + +#news_second .hero_news_container:hover .image_container img { + + transform: scale(1.1); + +} + +#news_second .hero_news_container .topic { + + margin-top: 32px; + margin-bottom: 8px; + +} + +#news_second .hero_news_container h2 a { + + transition: all ease-in-out 300ms; + +} + +#news_second .hero_news_container h2:hover a { + + color: var(--brand-color); + +} + +/* HERO NEWS LIST */ + +#hero_news_list { + display: flex; + flex-direction: column; + gap: 16px; +} + +#hero_news_list>div:not(:last-child) { + + border-bottom: 1px solid var(--white-50); + +} + + +.highlight_title h2 a { + + transition: all ease-in-out 300ms; + + line-height: 1.4; + + font-family: var(--font-family-sans-serif); + font-weight: 600; + color: var(--white-100); + + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + +} + +.highlight_title h2:hover a { + + color: var(--brand-color); + +} + +/* ANIMES NEWS */ +#animes_container { + + margin-bottom: 32px; + padding: 32px 0; + border-bottom: 1px solid var(--white-50); + +} + +@media(min-width: 600px) { + #animes_container { + margin-bottom: 0; + } +} + +#animes_container h2 { + + font-size: var(--font-size--h4); + color: var(--white-100); + margin-bottom: 24px; + +} + +/* 3 TOPICS CONTAINER */ +#manga_games_industry_container { + + display: grid; + grid-template-columns: 1fr; + gap: 32px; + +} + +@media(min-width: 600px) { + #manga_games_industry_container { + + grid-template-columns: 1fr 1fr 1fr; + + } +} + +#manga_games_industry_container .list_container { + + + display: flex; + flex-direction: column; + gap: 24px; + +} + +@media(min-width: 600px) { + #manga_games_industry_container .list_container { + margin: 24px 0; + } +} + +#manga_games_industry_container .list_container:not(:last-child) { + + padding-bottom: 32px; + border-bottom: 1px solid var(--white-50); + +} + +@media(min-width: 600px) { + #manga_games_industry_container .list_container:not(:last-child) { + border-bottom: 0; + } +} + +#manga_games_industry_container .list_container .item_container .image_container img, +#manga_games_industry_container .list_container .highlighted_container .image_container img { + + transition: all ease-in-out 100ms; + +} + +#manga_games_industry_container .list_container .item_container:hover .image_container img, +#manga_games_industry_container .list_container .highlighted_container:hover .image_container img { + + transform: scale(1.05); + +} + +#manga_games_industry_container .list_container>h2 { + + padding: 8px 16px; + + width: max-content; + + font-size: var(--font-size--p); + color: var(--white-100); + + background-color: var(--brand-color); + +} + +#manga_games_industry_container .list_container .highlighted_container { + + position: relative; + min-height: 260px; + + border-radius: 4px 4px 0 0; + + overflow: hidden; + +} + +.image_container img { + + object-fit: cover; + +} + +#manga_games_industry_container .list_container .highlighted_container .highlight_title { + + position: absolute; + bottom: 0; + left: 0; + right: 0; + + background-image: linear-gradient(transparent, rgba(24 24 24 / 0.5) 43%) +} + +#manga_games_industry_container .list_container .highlighted_container .highlight_title h2, +#manga_games_industry_container .list_container .highlighted_container .highlight_title>a { + position: relative; + bottom: 16px; + left: 16px; + right: 16px; +} + +#manga_games_industry_container .list_container .highlighted_container .highlight_title h2 a { + color: var(--white-100); + width: 92%; +} + +#manga_games_industry_container .item_container { + + display: grid; + grid-template-columns: 35% 1fr; + gap: 16px; + +} + +#manga_games_industry_container .item_container .image_container { + position: relative; + + aspect-ratio: 16/13; + + border-radius: 4px; + + overflow: hidden; +} + +#manga_games_industry_container .item_container .item_title_container { + + max-height: fit-content; + margin: auto; + +} + +#manga_games_industry_container .item_container .item_title_container small { + margin-top: 4px; + + display: flex; + gap: 0 8px; + align-items: center; + + font-weight: 300; + color: var(--white-50); +} \ No newline at end of file diff --git a/app/news/page.tsx b/app/news/page.tsx new file mode 100644 index 00000000..a6610dfc --- /dev/null +++ b/app/news/page.tsx @@ -0,0 +1,241 @@ +import { Metadata } from 'next' +import React from 'react' +import styles from "./page.module.css" +import newsApi from '@/api/news' +import Image from 'next/image' +import Link from 'next/link' +import SwiperContainer from './components/SwiperContainer' +import SvgCalendar from "@/public/assets/calendar3.svg" +import { News } from '../ts/interfaces/newsInterface' +import NewsCard1 from './components/NewsCard1' + +export const metadata: Metadata = { + title: 'News | AniProject', + description: 'See the latest news about a variety of animes, mangas and movies.', +} + +async function NewsHomePage() { + + const news = await newsApi.getNews() as News[] + + const animesNews = await newsApi.getNews("anime") as News[] + const mangasNews = await newsApi.getNews("manga") as News[] + const gamesNews = await newsApi.getNews("games") as News[] + const industryNews = await newsApi.getNews("industry") as News[] + + return ( + (news && mangasNews && gamesNews && industryNews) && ( +
    + +

    TRENDING NOW

    + +
    + +
    + +
    + +
    + {news[0].title} +
    + +
    + {news[0]?.topics[0] && ( + {news[0].topics[0].toUpperCase()} + )} + +

    {news[0].title}

    +
    +
    + +
    + {news.slice(1, 4).map((item, key) => ( + +
    + +
    + {item.title} +
    + +
    + {news[0]?.topics[0] && ( + {item.topics[0].toUpperCase()} + )} + +

    {item.title}

    +
    +
    + + ))} +
    + +
    + +
    + {news.slice(4, 9).map((item, key) => ( + + + + ))} +
    + +
    + +
    + +

    Recent Animes News

    + + + +
    + +
    + +
    + +

    MANGAS

    + +
    + +
    + {mangasNews[0].title} +
    + +
    + {news[0]?.topics[0] && ( + {mangasNews[0].topics[0].toUpperCase()} + )} + +

    {mangasNews[0].title}

    +
    +
    + + {mangasNews.slice(1, 6).map((item, key) => ( + +
    + +
    + + {item.title} + +
    + +
    + +

    {item.title}

    + + {item.uploadedAt && ( + {item.uploadedAt} + )} + +
    +
    + + ))} +
    + +
    + +

    GAMES

    + +
    + +
    + + {gamesNews[0].title} + +
    + +
    + {news[0]?.topics[0] && ( + {gamesNews[0].topics[0].toUpperCase()} + )} + +

    {gamesNews[0].title}

    +
    +
    + + {gamesNews.slice(1, 6).map((item, key) => ( + +
    + +
    + + {item.title} + +
    + +
    + +

    {item.title}

    + + {item.uploadedAt && ( + {item.uploadedAt} + )} + +
    +
    + + ))} +
    + +
    + +

    INDUSTRY

    + +
    + +
    + + {industryNews[0].title} + +
    + +
    + {news[0]?.topics[0] && ( + {industryNews[0].topics[0].toUpperCase()} + )} + +

    {industryNews[0].title}

    +
    +
    + + {industryNews.slice(1, 6).map((item, key) => ( + +
    + +
    + + {item.title} + +
    + +
    + +

    {item.title}

    + + {item.uploadedAt && ( + {item.uploadedAt} + )} + +
    +
    + + ))} +
    + +
    + +
    + ) + ) +} + +export default NewsHomePage \ No newline at end of file diff --git a/app/ts/interfaces/newsInterface.d.ts b/app/ts/interfaces/newsInterface.d.ts new file mode 100644 index 00000000..194d593d --- /dev/null +++ b/app/ts/interfaces/newsInterface.d.ts @@ -0,0 +1,22 @@ +export interface News { + + title: string, + id: string, + uploadedAt: string, + topics: string[], + preview: { + intro: string, + full: string + }, + thumbnail: string, + thumbnailHash: string, + url: string + +} + +export interface NewsArcticle extends News { + + intro: string, + description: string + +} \ No newline at end of file diff --git a/app/watch/[id]/components/EpisodesSideListContainer/index.tsx b/app/watch/[id]/components/EpisodesSideListContainer/index.tsx index 4e531dd8..6187b986 100644 --- a/app/watch/[id]/components/EpisodesSideListContainer/index.tsx +++ b/app/watch/[id]/components/EpisodesSideListContainer/index.tsx @@ -42,7 +42,9 @@ function EpisodesSideListContainer({ mediaId, mediaTitle, episodeId }: { mediaId // focus list item that correspond to current episode on page if (!isLoading) { const elementActive = document.querySelector("li[data-active=true]") - elementActive?.scrollIntoView(); + elementActive?.scrollIntoView() + + window.scrollTo({ top: 0, behavior: 'smooth' }) } if (episodesList.length == 0) loadData() diff --git a/app/watch/[id]/page.module.css b/app/watch/[id]/page.module.css index 5263485b..58273fdb 100644 --- a/app/watch/[id]/page.module.css +++ b/app/watch/[id]/page.module.css @@ -50,6 +50,12 @@ } +#media_info_container>div.grid[data-format="MOVIE"]>* { + + padding-right: 16px; + +} + @media(min-width: 768px) { #media_info_container { @@ -64,6 +70,15 @@ gap: 16px 32px; justify-content: space-between; } + + #media_info_container>div.grid[data-format="MOVIE"] { + grid-template-columns: 1fr; + } + + #media_info_container>div.grid[data-format="MOVIE"]>* { + + width: 80%; + } } @media(min-width: 980px) { diff --git a/app/watch/[id]/page.tsx b/app/watch/[id]/page.tsx index b5f62090..a0bf120b 100644 --- a/app/watch/[id]/page.tsx +++ b/app/watch/[id]/page.tsx @@ -31,8 +31,9 @@ async function WatchEpisode({ params, searchParams }: { const mediaData = await anilist.getMediaInfo(params.id) as ApiDefaultResult const episodeData = await gogoanime.getLinksForThisEpisode(searchParams.q) as EpisodeLinks + const episodeNumber = searchParams?.q.replace(/-/g, ' ').split(" ").map( - (item) => item[0].toUpperCase() + item.slice(1)).join(" ").slice(searchParams?.q.search(/\bepisode \b/) + (item) => item[0].toUpperCase() + item.slice(1)).join(" ").slice(searchParams?.q.search(/\bepisode\b/) ) return ( @@ -59,29 +60,30 @@ async function WatchEpisode({ params, searchParams }: {
    {/* SHOWS EPISODE ID SLICED FROM "EPISODE" WORD, AND ADD MEDIA NAME*/} -

    - {searchParams?.q.replace(/-/g, ' ').split(" ").map((item) => item[0].toUpperCase() + item.slice(1)).join(" ").slice(searchParams?.q.search(/\bepisode\b/))} - {" "}-{" "} - {mediaData.title.romaji || mediaData.title.native} -

    - -
    + {mediaData.format == "MOVIE" ? ( +

    {mediaData.title.romaji || mediaData.title.native}

    + ) : ( +

    + {episodeNumber} + {" "}-{" "} + {mediaData.title.romaji || mediaData.title.native} +

    + )} + +
    - + {mediaData.format != "MOVIE" && ( + + )}
    -

    - COMMENTS FOR EPISODE {searchParams?.q.replace(/-/g, ' ').split(" ").map( - (item) => - item[0].toUpperCase() + item.slice(1)).join(" ").slice(searchParams?.q.search(/\bepisode \b/)) - } -

    +

    COMMENTS {mediaData.format != "MOVIE" && (`FOR ${episodeNumber.toUpperCase()}`)}

    - +
    diff --git a/package-lock.json b/package-lock.json index 4014fe5a..a644400a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "aniproject", - "version": "2.3.5", + "version": "2.4.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "aniproject", - "version": "2.3.5", + "version": "2.4.0", "dependencies": { "axios": "^1.6.6", "firebase": "^10.8.0", diff --git a/package.json b/package.json index 9c4b96ef..b3cd6a2b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aniproject", - "version": "2.3.5", + "version": "2.4.0", "private": true, "scripts": { "dev": "next dev",