add horizontal scroll on mobile, add next episode to anime info

hikka-io · Mar 26, 2024 · fd04b6b · fd04b6b
1 parent fa852c4
commit fd04b6b
Show file tree

Hide file tree

Showing 25 changed files with 198 additions and 66 deletions.
diff --git a/app/(api)/auth/reset/[token]/route.ts b/app/(api)/auth/reset/[token]/route.ts
@@ -4,6 +4,5 @@ export async function GET(
     request: Request,
     { params: { token } }: { params: { token: string } },
 ) {
-    console.log(token);
     return redirect('/anime?page=1&iPage=1&modal=passwordConfirm&token=' + token);
 }
diff --git a/app/(pages)/anime/[slug]/_components/about.tsx b/app/(pages)/anime/[slug]/_components/about.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import format from 'date-fns/format';
 import formatDuration from 'date-fns/formatDuration';
 import intervalToDuration from 'date-fns/intervalToDuration';
 
@@ -28,6 +29,9 @@ const Component = () => {
     }
 
     const studio = data.companies.find((c) => c.type === 'studio');
+    const nextEpisodeSchedule = data.schedule?.find(
+        (s) => s.airing_at * 1000 > Date.now(),
+    );
 
     return (
         <div className="flex flex-col gap-8">
@@ -83,6 +87,42 @@ const Component = () => {
                         </div>
                     </div>
                 ) : null}
+                {nextEpisodeSchedule ? (
+                    <div className="flex flex-wrap">
+                        <div className="w-24">
+                            <Label className="text-muted-foreground">
+                                Наступний епізод:
+                            </Label>
+                        </div>
+                        <div className="flex-1">
+                            <Tooltip>
+                                <TooltipTrigger>
+                                    <Label>
+                                        {format(
+                                            new Date(
+                                                nextEpisodeSchedule.airing_at *
+                                                    1000,
+                                            ),
+                                            'd MMMM HH:mm',
+                                        )}
+                                    </Label>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                    <P>
+                                        {formatDuration(
+                                            intervalToDuration({
+                                                start:
+                                                    nextEpisodeSchedule.airing_at *
+                                                    1000,
+                                                end: Date.now(),
+                                            }),
+                                        )}
+                                    </P>
+                                </TooltipContent>
+                            </Tooltip>
+                        </div>
+                    </div>
+                ) : null}
                 {data.duration ? (
                     <div className="flex flex-wrap">
                         <div className="w-24">

diff --git a/app/(pages)/anime/[slug]/_components/characters.tsx b/app/(pages)/anime/[slug]/_components/characters.tsx
@@ -36,6 +36,7 @@ const Component = ({ extended }: Props) => {
                     className={clsx(
                         'grid grid-cols-3 gap-4 md:grid-cols-5 lg:gap-8',
                         extended && 'md:grid-cols-6',
+                        !extended && 'grid-flow-col grid-cols-scroll-5 overflow-x-auto no-scrollbar -mx-4 px-4'
                     )}
                 >
                     {(extended ? main : main.slice(0, 5)).map((ch) => (

diff --git a/app/(pages)/anime/[slug]/_components/franchise.tsx b/app/(pages)/anime/[slug]/_components/franchise.tsx
@@ -11,6 +11,7 @@ import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
 import useFranchise from '@/services/hooks/anime/useFranchise';
 import { useSettingsContext } from '@/services/providers/settings-provider';
 import { MEDIA_TYPE } from '@/utils/constants';
+import { cn } from '@/utils';
 
 interface Props {
     extended?: boolean;
@@ -24,8 +25,6 @@ const Component = ({ extended }: Props) => {
     const { list, fetchNextPage, hasNextPage, isFetchingNextPage, ref } =
         useFranchise({ slug: String(params.slug) });
 
-    console.log(list);
-
     if (!anime || !anime.has_franchise) {
         return null;
     }
@@ -44,10 +43,11 @@ const Component = ({ extended }: Props) => {
                 href={!extended ? params.slug + '/franchise' : undefined}
             />
             <div
-                className={clsx(
+                className={cn(
                     'grid grid-cols-2 gap-4 md:grid-cols-4 lg:gap-8',
                     extended && 'md:grid-cols-5',
-                )}
+                    !extended && 'grid-flow-col grid-cols-scroll-4 overflow-x-auto no-scrollbar -mx-4 px-4 grid-min-10',
+                )}/*repeat(2, minmax(0, 1fr))*/
             >
                 {filteredData.map((anime) => (
                     <EntryCard

diff --git a/app/(pages)/anime/[slug]/_components/links.tsx b/app/(pages)/anime/[slug]/_components/links.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import clsx from 'clsx';
 import { useState } from 'react';
 
 import Link from 'next/link';
@@ -12,6 +11,7 @@ import P from '@/components/typography/p';
 import { Button } from '@/components/ui/button';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
+import { cn } from '@/utils';
 
 interface Props {
     extended?: boolean;
@@ -25,12 +25,8 @@ const ExternalLink = ({ link }: { link: API.External }) => {
                 target="_blank"
                 className="flex h-auto flex-col items-center justify-center gap-2 overflow-hidden rounded-lg text-center"
             >
-                <H4 className="w-full truncate">
-                    {link.text}
-                </H4>
-                <P className="w-full truncate text-xs lowercase">
-                    {link.url}
-                </P>
+                <H4 className="w-full truncate">{link.text}</H4>
+                <P className="w-full truncate text-xs lowercase">{link.url}</P>
             </Link>
         </Button>
     );
@@ -87,11 +83,10 @@ const Component = ({ extended }: Props) => {
                 </ToggleGroup>
             </SubHeader>
             <div
-                className={clsx(
-                    'grid gap-4 lg:gap-8',
-                    extended
-                        ? 'grid-cols-2 md:grid-cols-3'
-                        : 'grid-cols-2 md:grid-cols-3',
+                className={cn(
+                    'grid md:grid-cols-3 gap-4 lg:gap-8',
+                    !extended &&
+                        'no-scrollbar grid-min-14 -mx-4 grid-flow-col grid-cols-scroll-3 overflow-x-auto px-4',
                 )}
             >
                 {active === 'general' &&

diff --git a/app/(pages)/anime/[slug]/_components/media.tsx b/app/(pages)/anime/[slug]/_components/media.tsx
@@ -1,16 +1,16 @@
 'use client';
 
-import clsx from 'clsx';
 import { useState } from 'react';
 import IcBaselineLibraryMusic from '~icons/ic/baseline-library-music';
 import IcBaselineOndemandVideo from '~icons/ic/baseline-ondemand-video';
 
 import { useParams } from 'next/navigation';
 
-import SubHeader from '@/components/sub-header';
 import EntryCard from '@/components/entry-card/entry-card';
+import SubHeader from '@/components/sub-header';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
+import { cn } from '@/utils';
 import { OST, VIDEO } from '@/utils/constants';
 
 interface Props {
@@ -73,15 +73,13 @@ const Component = ({ extended }: Props) => {
                 </ToggleGroup>
             </SubHeader>
             <div
-                className={clsx(
+                className={cn(
                     'grid gap-4 lg:gap-8',
-                    active === 'music'
-                        ? extended
-                            ? 'grid-cols-3 md:grid-cols-6'
-                            : 'grid-cols-3 md:grid-cols-4'
-                        : extended
-                          ? 'grid-cols-2 md:grid-cols-4'
-                          : 'grid-cols-2 md:grid-cols-3',
+                    !extended && 'grid-flow-col overflow-x-auto no-scrollbar -mx-4 px-4',
+                    active === 'music' && extended && 'grid-cols-3 md:grid-cols-6',
+                    active === 'music' && !extended && 'grid-cols-scroll-4 md:grid-cols-4',
+                    active === 'video' && extended && 'grid-cols-2 md:grid-cols-4',
+                    active === 'video' && !extended &&  'grid-cols-scroll-3 grid-min-10 md:grid-cols-3',
                 )}
             >
                 {active === 'music' &&

diff --git a/app/(pages)/anime/[slug]/_components/staff.tsx b/app/(pages)/anime/[slug]/_components/staff.tsx
@@ -44,6 +44,7 @@ const Component = ({ extended }: Props) => {
                 className={clsx(
                     'grid grid-cols-3 gap-4 md:grid-cols-4 lg:gap-8',
                     extended && 'md:grid-cols-6',
+                    !extended && 'grid-flow-col grid-cols-scroll-4 overflow-x-auto no-scrollbar -mx-4 px-4'
                 )}
             >
                 {filteredData.map((staff) => (

diff --git a/app/(pages)/characters/[slug]/_components/anime.tsx b/app/(pages)/characters/[slug]/_components/anime.tsx
@@ -9,6 +9,7 @@ import SubHeader from '@/components/sub-header';
 import { Button } from '@/components/ui/button';
 import useCharacterAnime from '@/services/hooks/characters/useCharacterAnime';
 import { useSettingsContext } from '@/services/providers/settings-provider';
+import { cn } from '@/utils';
 
 interface Props {
     extended?: boolean;
@@ -31,8 +32,9 @@ const Component = ({ extended }: Props) => {
                 href={!extended ? params.slug + '/anime' : undefined}
             />
             <div
-                className={clsx(
+                className={cn(
                     'grid grid-cols-2 gap-4 md:grid-cols-5 lg:gap-8',
+                    !extended && 'grid-flow-col grid-cols-scroll-5 grid-min-10 overflow-x-auto no-scrollbar -mx-4 px-4'
                 )}
             >
                 {(extended ? list : list.slice(0, 5)).map((ch) => (

diff --git a/app/(pages)/characters/[slug]/_components/voices.tsx b/app/(pages)/characters/[slug]/_components/voices.tsx
@@ -10,6 +10,7 @@ import EntryCard from '@/components/entry-card/entry-card';
 import { Button } from '@/components/ui/button';
 import useCharacterVoices from '@/services/hooks/characters/useCharacterVoices';
 import { useSettingsContext } from '@/services/providers/settings-provider';
+import { cn } from '@/utils';
 
 interface Props {
     extended?: boolean;
@@ -32,8 +33,9 @@ const Component = ({ extended }: Props) => {
                 href={!extended ? params.slug + '/voices' : undefined}
             />
             <div
-                className={clsx(
+                className={cn(
                     'grid grid-cols-2 gap-4 md:grid-cols-5 lg:gap-8',
+                    !extended && 'grid-flow-col grid-cols-scroll-5 grid-min-10 overflow-x-auto no-scrollbar -mx-4 px-4'
                 )}
             >
                 {(extended ? list : list.slice(0, 5)).map((ch) => (

diff --git a/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx b/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx
@@ -1,10 +1,10 @@
 'use client';
 
 import React, { memo } from 'react';
+import BxBxsUpvote from '~icons/bx/bxs-upvote';
 import IconamoonCommentFill from '~icons/iconamoon/comment-fill';
 import MaterialSymbolsGridViewRounded from '~icons/material-symbols/grid-view-rounded';
 import MaterialSymbolsMoreHoriz from '~icons/material-symbols/more-horiz';
-import BxBxsUpvote from '~icons/bx/bxs-upvote';
 
 import Link from 'next/link';
 
@@ -80,7 +80,12 @@ const Component = ({ collection }: Props) => {
                     ))}
                 </div>
             )}
-            <div className="grid grid-cols-3 flex-nowrap gap-4 md:grid-cols-5 lg:grid-cols-7 lg:gap-8">
+            <div
+                className={cn(
+                    'grid flex-nowrap gap-4 md:grid-cols-5 lg:grid-cols-7 lg:gap-8',
+                    'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll-7 overflow-x-auto px-4',
+                )}
+            >
                 {collection.collection.map((item) => (
                     <EntryCard
                         containerClassName={cn(

diff --git a/app/(pages)/collections/new/_components/anilist-collection.tsx b/app/(pages)/collections/new/_components/anilist-collection.tsx
@@ -80,7 +80,6 @@ const Component = ({ setCollectionState }: Props) => {
 
             closeModal();
         } catch (e) {
-            console.log(e);
             enqueueSnackbar('Не вдалось завантажити список аніме зі списку', {
                 variant: 'error',
             });

diff --git a/app/(pages)/people/[slug]/_components/anime.tsx b/app/(pages)/people/[slug]/_components/anime.tsx
@@ -35,6 +35,7 @@ const Component = ({ extended }: Props) => {
             <div
                 className={cn(
                     'grid grid-cols-2 gap-4 md:grid-cols-5 lg:gap-8',
+                    !extended && 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll-5 overflow-x-auto px-4'
                 )}
             >
                 {(extended ? list : list.slice(0, 5)).map((ch) => (

diff --git a/app/(pages)/people/[slug]/_components/characters.tsx b/app/(pages)/people/[slug]/_components/characters.tsx
@@ -10,6 +10,7 @@ import EntryCard from '@/components/entry-card/entry-card';
 import { Button } from '@/components/ui/button';
 import usePersonCharacters from '@/services/hooks/people/usePersonCharacters';
 import { useSettingsContext } from '@/services/providers/settings-provider';
+import { cn } from '@/utils';
 
 interface Props {
     extended?: boolean;
@@ -32,8 +33,10 @@ const Component = ({ extended }: Props) => {
                 href={!extended ? params.slug + '/characters' : undefined}
             />
             <div
-                className={clsx(
+                className={cn(
                     'grid grid-cols-2 gap-4 md:grid-cols-5 lg:gap-8',
+                    !extended && 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll-5 overflow-x-auto px-4'
+
                 )}
             >
                 {(extended ? list : list.slice(0, 5)).map((ch) => (

diff --git a/app/(pages)/u/[username]/_components/favorites/_components/anime.tsx b/app/(pages)/u/[username]/_components/favorites/_components/anime.tsx
@@ -2,14 +2,12 @@
 
 import { useParams } from 'next/navigation';
 
-
-
 import EntryCard from '@/components/entry-card/entry-card';
 import { Button } from '@/components/ui/button';
 import NotFound from '@/components/ui/not-found';
 import useFavorites from '@/services/hooks/favorite/useFavorites';
 import { useSettingsContext } from '@/services/providers/settings-provider';
-
+import { cn } from '@/utils';
 
 interface Props {
     extended?: boolean;
@@ -43,7 +41,13 @@ const Component = ({ extended }: Props) => {
     return (
         <>
             {filteredData.length > 0 && (
-                <div className="grid grid-cols-2 gap-4 md:grid-cols-6 lg:gap-8">
+                <div
+                    className={cn(
+                        'grid grid-cols-2 gap-4 md:grid-cols-6 lg:gap-8',
+                        !extended &&
+                            'grid-flow-col grid-cols-scroll-6 overflow-x-auto grid-min-10 no-scrollbar -mx-4 px-4',
+                    )}
+                >
                     {filteredData.map((res) => (
                         <EntryCard
                             key={res.slug}
@@ -68,8 +72,8 @@ const Component = ({ extended }: Props) => {
                 <NotFound
                     title={
                         <span>
-                            У списку{' '}
-                            <span className="font-black">Аніме</span> пусто
+                            У списку <span className="font-black">Аніме</span>{' '}
+                            пусто
                         </span>
                     }
                     description="Цей список оновиться після як сюди буде додано аніме"

diff --git a/app/(pages)/u/[username]/_components/favorites/_components/characters.tsx b/app/(pages)/u/[username]/_components/favorites/_components/characters.tsx
@@ -6,18 +6,25 @@ import EntryCard from '@/components/entry-card/entry-card';
 import { Button } from '@/components/ui/button';
 import NotFound from '@/components/ui/not-found';
 import useFavorites from '@/services/hooks/favorite/useFavorites';
+import { cn } from '@/utils';
 
 interface Props {
     extended?: boolean;
 }
 
 const Component = ({ extended }: Props) => {
     const params = useParams();
-    const { list, isPending, fetchNextPage, hasNextPage, isFetchingNextPage, ref } =
-        useFavorites<API.Content<'character'>>({
-            username: String(params.username),
-            content_type: 'character',
-        });
+    const {
+        list,
+        isPending,
+        fetchNextPage,
+        hasNextPage,
+        isFetchingNextPage,
+        ref,
+    } = useFavorites<API.Content<'character'>>({
+        username: String(params.username),
+        content_type: 'character',
+    });
 
     if (isPending) {
         return null;
@@ -29,11 +36,16 @@ const Component = ({ extended }: Props) => {
 
     const filteredData = (extended ? list : list?.slice(0, 6)) || [];
 
-
     return (
         <>
             {filteredData.length > 0 && (
-                <div className="grid grid-cols-2 gap-4 md:grid-cols-6 lg:gap-8">
+                <div
+                    className={cn(
+                        'grid grid-cols-2 gap-4 md:grid-cols-6 lg:gap-8',
+                        !extended &&
+                            'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll-6 overflow-x-auto px-4',
+                    )}
+                >
                     {filteredData.map((res) => (
                         <EntryCard
                             key={res.slug}