add typography, add diff to edit

hikka-io · Mar 6, 2024 · a628fe9 · a628fe9
1 parent 994b407
commit a628fe9
Show file tree

Hide file tree

Showing 82 changed files with 1,246 additions and 848 deletions.
diff --git a/app/(pages)/anime/[slug]/_components/about.tsx b/app/(pages)/anime/[slug]/_components/about.tsx
@@ -15,6 +15,7 @@ import {
 } from '@/components/ui/tooltip';
 import { AGE_RATING, MEDIA_TYPE, RELEASE_STATUS } from '@/utils/constants';
 import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
+import P from '@/components/typography/p';
 
 
 const Component = () => {
@@ -58,9 +59,9 @@ const Component = () => {
                                     RELEASE_STATUS[data.status].color,
                             }}
                         >
-                            <p className="text-sm !text-white">
+                            <P className="text-sm text-white">
                                 {RELEASE_STATUS[data.status].title_ua}
-                            </p>
+                            </P>
                         </div>
                     </div>
                 </div>
@@ -134,9 +135,9 @@ const Component = () => {
                                         />
                                     </TooltipTrigger>
                                     <TooltipContent>
-                                        <p className="text-sm">
+                                        <P className="text-sm">
                                             {studio.company.name}
-                                        </p>
+                                        </P>
                                     </TooltipContent>
                                 </Tooltip>
                             ) : (

diff --git a/app/(pages)/anime/[slug]/_components/actions/_components/watchlist-stats.tsx b/app/(pages)/anime/[slug]/_components/actions/_components/watchlist-stats.tsx
@@ -3,9 +3,14 @@
 import { createElement, useRef } from 'react';
 import { NumericFormat } from 'react-number-format';
 
+
+
 import { useParams } from 'next/navigation';
 
+
+
 import SubHeader from '@/components/sub-header';
+import Small from '@/components/typography/small';
 import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
 import useSize from '@/services/hooks/useSize';
 import { WATCH_STATUS } from '@/utils/constants';
@@ -61,14 +66,14 @@ const Component = () => {
                                         <div className="rounded-md bg-secondary p-1">
                                             {createElement(status.icon!)}
                                         </div>
-                                        <p className="text-xs text-muted-foreground w-10 text-right">
+                                        <Small className="text-muted-foreground w-10 text-right">
                                             <NumericFormat
                                                 suffix="%"
                                                 displayType="text"
                                                 value={percentage}
                                                 decimalScale={1}
                                             />
-                                        </p>
+                                        </Small>
                                     </div>
                                     <div
                                         ref={ref}

diff --git a/app/(pages)/anime/[slug]/_components/links.tsx b/app/(pages)/anime/[slug]/_components/links.tsx
@@ -9,6 +9,9 @@ import { useParams } from 'next/navigation';
 import SubHeader from '@/components/sub-header';
 import { Button } from '@/components/ui/button';
 import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
+import H4 from '@/components/typography/h4';
+import Small from '@/components/typography/small';
+import P from '@/components/typography/p';
 
 interface Props {
     extended?: boolean;
@@ -22,12 +25,12 @@ const ExternalLink = ({ link }: { link: API.External }) => {
                 target="_blank"
                 className="flex h-auto flex-col items-center justify-center text-center gap-2 overflow-hidden rounded-lg"
             >
-                <h4 className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap">
+                <H4 className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap">
                     {link.text}
-                </h4>
-                <p className="lowercase w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-xs">
+                </H4>
+                <P className="text-xs lowercase w-full overflow-hidden overflow-ellipsis whitespace-nowrap">
                     {link.url}
-                </p>
+                </P>
             </Link>
         </Button>
     );

diff --git a/app/(pages)/anime/[slug]/_components/title.tsx b/app/(pages)/anime/[slug]/_components/title.tsx
@@ -5,17 +5,23 @@ import { useEffect, useRef } from 'react';
 import MaterialSymbolsEditRounded from '~icons/material-symbols/edit-rounded';
 import MaterialSymbolsStarRounded from '~icons/material-symbols/star-rounded';
 
+
+
 import Link from 'next/link';
 import { useParams, usePathname } from 'next/navigation';
 
+
+
 import EditListModal from '@/components/modals/editlist-modal';
+import H2 from '@/components/typography/h2';
 import { Button } from '@/components/ui/button';
+import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
 import useIsMobile from '@/services/hooks/useIsMobile';
 import { useAuthContext } from '@/services/providers/auth-provider';
 import { useModalContext } from '@/services/providers/modal-provider';
 import { useSettingsContext } from '@/services/providers/settings-provider';
 import { ANIME_NAV_ROUTES } from '@/utils/constants';
-import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
+import P from '@/components/typography/p';
 
 
 const EditButton = ({ className }: { className?: string }) => {
@@ -77,7 +83,7 @@ const Component = () => {
             <div className="flex justify-between gap-4" ref={divRef}>
                 <div>
                     <div className="flex gap-4">
-                        <h2>
+                        <H2>
                             {data[titleLanguage!] ||
                                 data.title_ua ||
                                 data.title_en ||
@@ -92,17 +98,17 @@ const Component = () => {
                                     )
                                 </span>
                             )}
-                        </h2>
+                        </H2>
                         {secret && <EditButton className="hidden lg:flex" />}
                     </div>
-                    <p className="mt-2">{data.title_ja}</p>
+                    <P className="mt-2">{data.title_ja}</P>
                 </div>
                 <div className="flex flex-col gap-2">
                     {data.score > 0 && (
                         <div className="flex gap-2 items-start">
-                            <p className="font-display text-4xl font-bold">
+                            <div className="font-display text-4xl font-bold">
                                 {data.score}
-                            </p>
+                            </div>
 
                             <MaterialSymbolsStarRounded className="text-2xl" />
                         </div>

diff --git a/app/(pages)/anime/[slug]/_components/watch-stats.tsx b/app/(pages)/anime/[slug]/_components/watch-stats.tsx
@@ -2,14 +2,15 @@
 
 import { useParams } from 'next/navigation';
 
+import H3 from '@/components/typography/h3';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Progress } from '@/components/ui/progress';
 import Rating from '@/components/ui/rating';
-import { useAuthContext } from '@/services/providers/auth-provider';
 import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
-import useWatch from '@/services/hooks/watch/useWatch';
 import useAddWatch from '@/services/hooks/watch/useAddWatch';
+import useWatch from '@/services/hooks/watch/useWatch';
+import { useAuthContext } from '@/services/providers/auth-provider';
 
 const Component = () => {
     const params = useParams();
@@ -80,12 +81,12 @@ const Component = () => {
                     precision={0.5}
                     value={watch.score ? watch.score / 2 : 0}
                 />
-                <h3>
+                <H3>
                     {watch.score}
                     <Label className="text-sm font-normal text-muted-foreground">
                         /10
                     </Label>
-                </h3>
+                </H3>
             </div>
             <div className="rounded-lg border border-secondary/60 bg-secondary/30 p-4">
                 <div className="flex justify-between gap-2 overflow-hidden">
@@ -111,12 +112,12 @@ const Component = () => {
                         </Button>
                     </div>
                 </div>
-                <h3>
+                <H3>
                     {watch.episodes}
                     <Label className="text-sm font-normal text-muted-foreground">
                         /{watch.anime.episodes_total || '?'}
                     </Label>
-                </h3>
+                </H3>
                 <Progress
                     className="h-2 mt-2"
                     max={watch.anime.episodes_total || watch.episodes}

diff --git a/app/(pages)/characters/[slug]/_components/title.tsx b/app/(pages)/characters/[slug]/_components/title.tsx
@@ -13,6 +13,8 @@ import useIsMobile from '@/services/hooks/useIsMobile';
 import { useAuthContext } from '@/services/providers/auth-provider';
 import { useModalContext } from '@/services/providers/modal-provider';
 import { CHARACTER_NAV_ROUTES } from '@/utils/constants';
+import H2 from '@/components/typography/h2';
+import P from '@/components/typography/p';
 
 
 const EditButton = ({ className }: { className?: string }) => {
@@ -73,15 +75,15 @@ const Component = () => {
             <div className="flex justify-between gap-4" ref={divRef}>
                 <div>
                     <div className="flex gap-4">
-                        <h2>
+                        <H2>
                             {character.name_ua ||
                                 character.name_en ||
                                 character.name_ja ||
                                 ''}{' '}
-                        </h2>
+                        </H2>
                         {secret && <EditButton className="hidden lg:flex" />}
                     </div>
-                    <p className="mt-2">{character.name_ja}</p>
+                    <P className="mt-2">{character.name_ja}</P>
                 </div>
                 <div className="flex flex-col items-end gap-2">
                     {secret && <EditButton className="flex lg:hidden" />}

diff --git a/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx b/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx
@@ -9,6 +9,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 
 import AnimeCard from '@/components/anime-card';
+import Small from '@/components/typography/small';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import BaseCard from '@/components/ui/base-card';
@@ -54,7 +55,9 @@ const Component = ({ collection }: Props) => {
                                 );
                             }}
                         >
-                            <Label className={cn('line-clamp-1 cursor-pointer')}>
+                            <Label
+                                className={cn('line-clamp-1 cursor-pointer')}
+                            >
                                 {collection.title}
                             </Label>
                         </button>
@@ -69,15 +72,11 @@ const Component = ({ collection }: Props) => {
                     <div className="inline-flex gap-2 items-center text-muted-foreground text-xs">
                         <div className="flex gap-1">
                             <MaterialSymbolsGridViewRounded />
-                            <Label className="text-xs">
-                                {collection.entries}
-                            </Label>
+                            <Small>{collection.entries}</Small>
                         </div>
                         <div className="flex gap-1">
                             <IconamoonCommentFill />
-                            <Label className="text-xs">
-                                {collection.comments_count}
-                            </Label>
+                            <Small>{collection.comments_count}</Small>
                         </div>
                     </div>
                 </div>
@@ -97,7 +96,7 @@ const Component = ({ collection }: Props) => {
                 </div>
             )}
             <div className="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-4 lg:gap-8 flex-nowrap">
-                {[...collection.collection].reverse().map((item, index) => (
+                {collection.collection.map((item, index) => (
                     <AnimeCard
                         containerClassName={cn(
                             collection.nsfw && 'blur-sm hover:blur-none',

diff --git a/app/(pages)/collections/[reference]/_components/collection-info.tsx b/app/(pages)/collections/[reference]/_components/collection-info.tsx
@@ -29,6 +29,8 @@ import { useCollectionContext } from '@/services/providers/collection-provider';
 import useCollection from '@/services/hooks/collections/useCollection';
 import useDeleteCollection from '@/services/hooks/collections/useDeleteCollection';
 import useLoggedUser from '@/services/hooks/user/useLoggedUser';
+import H5 from '@/components/typography/h5';
+import P from '@/components/typography/p';
 
 const Component = () => {
     const params = useParams();
@@ -73,7 +75,7 @@ const Component = () => {
                         </Link>
                         <div className="flex flex-1 flex-col">
                             <Link href={'/u/' + collection?.author.username}>
-                                <h5>{collection?.author.username}</h5>
+                                <H5>{collection?.author.username}</H5>
                             </Link>
                         </div>
                     </div>
@@ -119,13 +121,13 @@ const Component = () => {
                                         колекцію?
                                     </AlertDialogTitle>
                                     <AlertDialogDescription>
-                                        <p>
+                                        <P>
                                             Колекція{' '}
                                             <span className="font-bold">
                                                 {collection?.title}
                                             </span>{' '}
                                             буде видалена назавжди.
-                                        </p>
+                                        </P>
                                     </AlertDialogDescription>
                                 </AlertDialogHeader>
                                 <AlertDialogFooter>

diff --git a/app/(pages)/collections/new/_components/collection-settings/collection-settings.tsx b/app/(pages)/collections/new/_components/collection-settings/collection-settings.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 
 import { useParams } from 'next/navigation';
 
-import GroupInputs from '@/app/(pages)/collections/new/_components/collection-settings/_components/group-inputs';
+import GroupInputs from './_components/group-inputs';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { InputTags } from '@/components/ui/input-tags';
@@ -19,6 +19,8 @@ import {
 import useCreateCollection from '@/services/hooks/collections/useCreateCollection';
 import useUpdateCollection from '@/services/hooks/collections/useUpdateCollection';
 
+import SimpleIconsAnilist from '~icons/simple-icons/anilist'
+
 interface Props {
     mode?: 'create' | 'edit';
 }
@@ -152,6 +154,7 @@ const Component = ({ mode = 'create' }: Props) => {
                         Теги
                     </Label>
                     <InputTags
+                        disabled={tags.length === 3}
                         id="tags"
                         value={tags}
                         onChange={(tags) =>
@@ -191,20 +194,26 @@ const Component = ({ mode = 'create' }: Props) => {
                         </Button>
                     )}
                     {mode === 'create' && (
-                        <Button
-                            disabled={
-                                isCreatePending ||
-                                title.trim().length < 3 ||
-                                description.trim().length < 3
-                            }
-                            variant="default"
-                            onClick={() => mutateCreateCollection()}
-                        >
-                            {isCreatePending && (
-                                <span className="loading loading-spinner"></span>
-                            )}
-                            Створити
-                        </Button>
+                        <div className="flex gap-4">
+                            <Button
+                                className="flex-1"
+                                disabled={
+                                    isCreatePending ||
+                                    title.trim().length < 3 ||
+                                    description.trim().length < 3
+                                }
+                                variant="default"
+                                onClick={() => mutateCreateCollection()}
+                            >
+                                {isCreatePending && (
+                                    <span className="loading loading-spinner"></span>
+                                )}
+                                Створити
+                            </Button>
+                            <Button size="icon" variant="secondary">
+                                <SimpleIconsAnilist />
+                            </Button>
+                        </div>
                     )}
                 </div>
             </div>

diff --git a/app/(pages)/collections/new/page.tsx b/app/(pages)/collections/new/page.tsx
@@ -7,6 +7,8 @@ import CollectionSettings from './_components/collection-settings';
 import CollectionTitle from './_components/collection-title';
 import Breadcrumbs from '@/components/breadcrumbs';
 import Link from 'next/link';
+import P from '@/components/typography/p';
+import { Label } from '@/components/ui/label';
 
 
 const Component = () => {
@@ -15,11 +17,10 @@ const Component = () => {
             <>
                 <Breadcrumbs>
                     <div className="flex w-auto items-center gap-4 overflow-hidden whitespace-nowrap">
-                        <p
-                            className="text-sm"
+                        <Label
                         >
                             Нова колекція
-                        </p>
+                        </Label>
                     </div>
                 </Breadcrumbs>
                 <div className="grid grid-cols-1 justify-center lg:grid-cols-[1fr_25%] lg:items-start lg:justify-between lg:gap-16">