From 0002b6137f84c9acae4153b45502a8e99563e158 Mon Sep 17 00:00:00 2001 From: olexh Date: Tue, 9 Apr 2024 02:23:33 +0300 Subject: [PATCH] fix few mobile bugs, add image optimization, add expand text feature, improve watch list, improve dynamic grid --- .../anime/[slug]/components/characters.tsx | 2 +- app/(pages)/anime/[slug]/components/cover.tsx | 2 +- .../anime/[slug]/components/description.tsx | 13 +- .../anime/[slug]/components/franchise.tsx | 2 +- app/(pages)/anime/[slug]/components/links.tsx | 2 +- app/(pages)/anime/[slug]/components/media.tsx | 4 +- app/(pages)/anime/[slug]/components/staff.tsx | 2 +- app/(pages)/anime/[slug]/layout.tsx | 2 +- .../characters/[slug]/components/anime.tsx | 2 +- .../characters/[slug]/components/voices.tsx | 2 +- app/(pages)/characters/[slug]/layout.tsx | 2 +- .../components/ui/collection-item.tsx | 2 +- .../components/collection-title.tsx | 7 +- .../edit-list/components/edit-row.tsx | 2 +- app/(pages)/edit/layout.tsx | 2 +- .../people/[slug]/components/anime.tsx | 2 +- .../people/[slug]/components/characters.tsx | 2 +- app/(pages)/people/[slug]/layout.tsx | 2 +- .../favorites/_components/anime.tsx | 2 +- .../favorites/_components/characters.tsx | 2 +- .../favorites/_components/collections.tsx | 2 +- app/(pages)/u/[username]/layout.tsx | 6 +- .../components/list/components/table-view.tsx | 164 +++++++----------- .../list/components/ui/details-cell.tsx | 29 ++-- .../list/components/ui/episodes-cell.tsx | 3 +- .../list/components/ui/number-cell.tsx | 60 ++++++- app/globals.css | 9 +- components/comments/components/comment.tsx | 14 +- components/entry-card/entry-card.tsx | 10 +- .../search-modal/components/search-toggle.tsx | 10 +- .../modals/search-modal/search-modal.tsx | 10 +- components/navbar/nav-dropdown.tsx | 2 +- components/navbar/sub-nav.tsx | 26 ++- components/text-expand.tsx | 46 +++++ next.config.mjs | 1 - services/api/config.ts | 3 - tailwind.config.js | 10 +- 37 files changed, 263 insertions(+), 200 deletions(-) create mode 100644 components/text-expand.tsx diff --git a/app/(pages)/anime/[slug]/components/characters.tsx b/app/(pages)/anime/[slug]/components/characters.tsx index 8fd05560..b6ae4835 100644 --- a/app/(pages)/anime/[slug]/components/characters.tsx +++ b/app/(pages)/anime/[slug]/components/characters.tsx @@ -36,7 +36,7 @@ const Characters = ({ 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 && 'grid-flow-col grid-cols-scroll auto-cols-scroll 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/cover.tsx b/app/(pages)/anime/[slug]/components/cover.tsx index 3fc78d09..62036c85 100644 --- a/app/(pages)/anime/[slug]/components/cover.tsx +++ b/app/(pages)/anime/[slug]/components/cover.tsx @@ -12,7 +12,7 @@ const Cover = ({ anime }: Props) => { return (
- +
diff --git a/app/(pages)/anime/[slug]/components/description.tsx b/app/(pages)/anime/[slug]/components/description.tsx index 9471ed17..0b2ccf88 100644 --- a/app/(pages)/anime/[slug]/components/description.tsx +++ b/app/(pages)/anime/[slug]/components/description.tsx @@ -2,10 +2,15 @@ import { useState } from 'react'; + + import { useParams } from 'next/navigation'; + + import MDViewer from '@/components/markdown/viewer/MD-viewer'; import SubHeader from '@/components/sub-header'; +import TextExpand from '@/components/text-expand'; import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'; import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo'; @@ -51,9 +56,11 @@ const Description = () => { )} - - {data[active] || data.synopsis_ua || data.synopsis_en} - + + + {data[active] || data.synopsis_ua || data.synopsis_en} + +
); }; diff --git a/app/(pages)/anime/[slug]/components/franchise.tsx b/app/(pages)/anime/[slug]/components/franchise.tsx index cb9571c6..75763ac1 100644 --- a/app/(pages)/anime/[slug]/components/franchise.tsx +++ b/app/(pages)/anime/[slug]/components/franchise.tsx @@ -46,7 +46,7 @@ const Franchise = ({ extended }: Props) => { className={cn( 'grid grid-cols-2 gap-4 md:grid-cols-4 lg:gap-8', extended && 'md:grid-cols-5', - !extended && 'no-scrollbar grid-min-10 -mx-4 grid-flow-col grid-cols-scroll-4 overflow-x-auto px-4', + !extended && 'no-scrollbar grid-min-10 -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4', )}/*repeat(2, minmax(0, 1fr))*/ > {filteredData.map((anime) => ( diff --git a/app/(pages)/anime/[slug]/components/links.tsx b/app/(pages)/anime/[slug]/components/links.tsx index 47c8315e..ffe785e1 100644 --- a/app/(pages)/anime/[slug]/components/links.tsx +++ b/app/(pages)/anime/[slug]/components/links.tsx @@ -86,7 +86,7 @@ const Links = ({ extended }: Props) => { className={cn( 'grid gap-4 md:grid-cols-3 lg:gap-8', !extended && - 'no-scrollbar grid-min-14 -mx-4 grid-flow-col grid-cols-scroll-3 overflow-x-auto px-4', + 'no-scrollbar grid-min-14 -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll 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 index 37801461..58027ff8 100644 --- a/app/(pages)/anime/[slug]/components/media.tsx +++ b/app/(pages)/anime/[slug]/components/media.tsx @@ -81,13 +81,13 @@ const Media = ({ extended }: Props) => { 'grid-cols-3 md:grid-cols-6', active === 'music' && !extended && - 'grid-cols-scroll-4 md:grid-cols-4', + 'grid-cols-scroll auto-cols-scroll md:grid-cols-4', active === 'video' && extended && 'grid-cols-2 md:grid-cols-4', active === 'video' && !extended && - 'grid-min-10 grid-cols-scroll-3 md:grid-cols-3', + 'grid-min-10 grid-cols-scroll auto-cols-scroll md:grid-cols-3', )} > {active === 'music' && diff --git a/app/(pages)/anime/[slug]/components/staff.tsx b/app/(pages)/anime/[slug]/components/staff.tsx index 6f317bee..2c797ce4 100644 --- a/app/(pages)/anime/[slug]/components/staff.tsx +++ b/app/(pages)/anime/[slug]/components/staff.tsx @@ -44,7 +44,7 @@ const Staff = ({ 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' + !extended && 'grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto no-scrollbar -mx-4 px-4' )} > {filteredData.map((staff) => ( diff --git a/app/(pages)/anime/[slug]/layout.tsx b/app/(pages)/anime/[slug]/layout.tsx index 703de388..81e7f229 100644 --- a/app/(pages)/anime/[slug]/layout.tsx +++ b/app/(pages)/anime/[slug]/layout.tsx @@ -172,7 +172,7 @@ const AnimeLayout = async ({ params: { slug }, children }: Props) => { urlPrefix={'/anime/' + slug} /> - + {
{(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 index 66794411..ec4b2ff9 100644 --- a/app/(pages)/characters/[slug]/components/voices.tsx +++ b/app/(pages)/characters/[slug]/components/voices.tsx @@ -35,7 +35,7 @@ const Voices = ({ extended }: Props) => {
{(extended ? list : list.slice(0, 5)).map((ch) => ( diff --git a/app/(pages)/characters/[slug]/layout.tsx b/app/(pages)/characters/[slug]/layout.tsx index c4600a88..9b7a30ee 100644 --- a/app/(pages)/characters/[slug]/layout.tsx +++ b/app/(pages)/characters/[slug]/layout.tsx @@ -122,7 +122,7 @@ const CharacterLayout = async ({ params: { slug }, children }: Props) => { urlPrefix={'/characters/' + slug} /> - + {
{collection.collection.map((item) => ( diff --git a/app/(pages)/collections/[reference]/components/collection-title.tsx b/app/(pages)/collections/[reference]/components/collection-title.tsx index 4001a1d1..84217b77 100644 --- a/app/(pages)/collections/[reference]/components/collection-title.tsx +++ b/app/(pages)/collections/[reference]/components/collection-title.tsx @@ -4,6 +4,7 @@ import React from 'react'; import MDViewer from '@/components/markdown/viewer/MD-viewer'; import SubHeader from '@/components/sub-header'; +import TextExpand from '@/components/text-expand'; import { useCollectionContext } from '@/services/providers/collection-provider'; const CollectionTitle = () => { @@ -13,9 +14,9 @@ const CollectionTitle = () => {
{description && ( - - {description} - + + {description} + )}
); diff --git a/app/(pages)/edit/components/edit-list/components/edit-row.tsx b/app/(pages)/edit/components/edit-list/components/edit-row.tsx index f2f64461..162bff40 100644 --- a/app/(pages)/edit/components/edit-list/components/edit-row.tsx +++ b/app/(pages)/edit/components/edit-list/components/edit-row.tsx @@ -32,7 +32,7 @@ const EditRow = ({ edit }: Props) => { return ( router.push(`/edit/${edit.edit_id}`)} > diff --git a/app/(pages)/edit/layout.tsx b/app/(pages)/edit/layout.tsx index 5c48b304..a01a0c3b 100644 --- a/app/(pages)/edit/layout.tsx +++ b/app/(pages)/edit/layout.tsx @@ -27,7 +27,7 @@ const EditListLayout = ({ children }: Props) => { - + {children} diff --git a/app/(pages)/people/[slug]/components/anime.tsx b/app/(pages)/people/[slug]/components/anime.tsx index d62e1476..8192ca2a 100644 --- a/app/(pages)/people/[slug]/components/anime.tsx +++ b/app/(pages)/people/[slug]/components/anime.tsx @@ -35,7 +35,7 @@ const Anime = ({ extended }: Props) => {
{(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 index e27b653e..bf77c48a 100644 --- a/app/(pages)/people/[slug]/components/characters.tsx +++ b/app/(pages)/people/[slug]/components/characters.tsx @@ -35,7 +35,7 @@ const Characters = ({ extended }: Props) => {
diff --git a/app/(pages)/people/[slug]/layout.tsx b/app/(pages)/people/[slug]/layout.tsx index 030d1f9b..b37df74f 100644 --- a/app/(pages)/people/[slug]/layout.tsx +++ b/app/(pages)/people/[slug]/layout.tsx @@ -107,7 +107,7 @@ const PersonLayout = async ({ params: { slug }, children }: Props) => { urlPrefix={'/people/' + slug} /> - + { 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', + 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4', )} > {filteredData.map((res) => ( diff --git a/app/(pages)/u/[username]/components/favorites/_components/characters.tsx b/app/(pages)/u/[username]/components/favorites/_components/characters.tsx index 04b2af07..59d1d6c4 100644 --- a/app/(pages)/u/[username]/components/favorites/_components/characters.tsx +++ b/app/(pages)/u/[username]/components/favorites/_components/characters.tsx @@ -43,7 +43,7 @@ const Component = ({ extended }: Props) => { 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', + 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4', )} > {filteredData.map((res) => ( diff --git a/app/(pages)/u/[username]/components/favorites/_components/collections.tsx b/app/(pages)/u/[username]/components/favorites/_components/collections.tsx index 1eea76d1..f3e1faba 100644 --- a/app/(pages)/u/[username]/components/favorites/_components/collections.tsx +++ b/app/(pages)/u/[username]/components/favorites/_components/collections.tsx @@ -43,7 +43,7 @@ const Component = ({ extended }: Props) => { 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', + 'grid-min-10 no-scrollbar -mx-4 grid-flow-col grid-cols-scroll auto-cols-scroll overflow-x-auto px-4', )} > {filteredData.map((res) => ( diff --git a/app/(pages)/u/[username]/layout.tsx b/app/(pages)/u/[username]/layout.tsx index 619286cc..70c7d639 100644 --- a/app/(pages)/u/[username]/layout.tsx +++ b/app/(pages)/u/[username]/layout.tsx @@ -101,8 +101,8 @@ const Component = async ({ params: { username }, children }: Props) => { src={user.cover} className="relative size-full object-cover" alt="cover" - width={1500} - height={500} + fill + priority />
)} @@ -118,7 +118,7 @@ const Component = async ({ params: { username }, children }: Props) => { urlPrefix={'/u/' + username} /> - + { const searchParams = useSearchParams(); const pathname = usePathname(); const router = useRouter(); - const { openModal } = useModalContext(); - const params = useParams(); const order = searchParams.get('order'); const sort = searchParams.get('sort'); - const { data: loggedUser } = useLoggedUser(); - const switchSort = ( newSort: 'watch_score' | 'watch_episodes' | 'media_type', ) => { @@ -66,96 +54,68 @@ const Component = ({ data }: Props) => { router.replace(`${pathname}?${query}`); }; - const openWatchEditModal = ( - e: MouseEvent, - anime: API.Anime, - ) => { - const target = e.target as HTMLElement; - - if ( - target && - 'getAttribute' in target && - (target.getAttribute('href') || target.getAttribute('src')) - ) - return; - - openModal({ - content: , - className: '!max-w-xl', - title: - anime[titleLanguage!] || - anime.title_ua || - anime.title_en || - anime.title_ja, - }); - }; - return ( -
- - - - # - Деталі - switchSort('watch_episodes')} - > - Епізоди - - switchSort('media_type')} - > - Тип - - switchSort('watch_score')} - > - Оцінка - +
+ + + # + Деталі + switchSort('watch_episodes')} + > + Епізоди + + switchSort('media_type')} + > + Тип + + switchSort('watch_score')} + > + Оцінка + + + + + {data.map((res, i) => ( + + + + + + - - - {data.map((res, i) => ( - - loggedUser?.username === params.username && - openWatchEditModal(e, res.anime) - } - > - - - - - - - ))} - -
-
+ ))} + + ); }; diff --git a/app/(pages)/u/[username]/list/components/list/components/ui/details-cell.tsx b/app/(pages)/u/[username]/list/components/list/components/ui/details-cell.tsx index ab260a89..bf3a44e5 100644 --- a/app/(pages)/u/[username]/list/components/list/components/ui/details-cell.tsx +++ b/app/(pages)/u/[username]/list/components/list/components/ui/details-cell.tsx @@ -1,17 +1,9 @@ -import { useState } from 'react'; - - - import Link from 'next/link'; - - +import EntryCard from '@/components/entry-card/entry-card'; import MDViewer from '@/components/markdown/viewer/MD-viewer'; import { Badge } from '@/components/ui/badge'; -import EntryCard from '@/components/entry-card/entry-card'; import { TableCell } from '@/components/ui/table'; -import { Button } from '@/components/ui/button'; - interface Props { anime: API.Anime; @@ -21,18 +13,19 @@ interface Props { } const Component = ({ anime, rewatches, note, titleLanguage }: Props) => { - const [expandNote, setExpandNote] = useState(false); - return ( - +
- +
{anime[titleLanguage] || @@ -44,11 +37,15 @@ const Component = ({ anime, rewatches, note, titleLanguage }: Props) => { {rewatches} )}
- {note && {note}} + {note && ( + + {note} + + )}
); -} +}; export default Component; diff --git a/app/(pages)/u/[username]/list/components/list/components/ui/episodes-cell.tsx b/app/(pages)/u/[username]/list/components/list/components/ui/episodes-cell.tsx index a4e74d7e..208b6cd7 100644 --- a/app/(pages)/u/[username]/list/components/list/components/ui/episodes-cell.tsx +++ b/app/(pages)/u/[username]/list/components/list/components/ui/episodes-cell.tsx @@ -6,8 +6,9 @@ interface Props { } const Component = ({ episodes, total }: Props) => ( - + {episodes} / {total || '?'} + ); diff --git a/app/(pages)/u/[username]/list/components/list/components/ui/number-cell.tsx b/app/(pages)/u/[username]/list/components/list/components/ui/number-cell.tsx index 83454e69..997fcdab 100644 --- a/app/(pages)/u/[username]/list/components/list/components/ui/number-cell.tsx +++ b/app/(pages)/u/[username]/list/components/list/components/ui/number-cell.tsx @@ -1,14 +1,62 @@ +'use client'; + +import MaterialSymbolsMoreVert from '~icons/material-symbols/more-vert'; + +import { useParams } from 'next/navigation'; + +import WatchEditModal from '@/components/modals/watch-edit-modal'; +import { Button } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { TableCell } from '@/components/ui/table'; +import useLoggedUser from '@/services/hooks/user/useLoggedUser'; +import { useModalContext } from '@/services/providers/modal-provider'; +import { cn } from '@/utils/utils'; interface Props { number: number; + anime: API.Anime; + titleLanguage: 'title_en' | 'title_ua' | 'title_ja'; } -const Component = ({ number }: Props) => ( - - - -); +const Component = ({ number, anime, titleLanguage }: Props) => { + const params = useParams(); + const { openModal } = useModalContext(); + const { data: loggedUser } = useLoggedUser(); + + const openWatchEditModal = () => { + openModal({ + content: , + className: '!max-w-xl', + title: + anime[titleLanguage!] || + anime.title_ua || + anime.title_en || + anime.title_ja, + }); + }; + + return ( + + {loggedUser?.username === params.username && ( + + )} + + + ); +}; -export default Component; \ No newline at end of file +export default Component; diff --git a/app/globals.css b/app/globals.css index 9cc86746..cfe95140 100644 --- a/app/globals.css +++ b/app/globals.css @@ -99,7 +99,7 @@ body { @apply bg-background text-foreground bg-no-repeat; - background-size: 100% 100vh; + background-size: 100% 50vh; } } @@ -210,11 +210,11 @@ main { width: 100%; } -table th:first-child { +table th:first-child, td:first-child { @apply rounded-l-md; } -table th:last-child { +table th:last-child, td:last-child { @apply rounded-r-md; } @@ -340,4 +340,5 @@ table th:last-child { ._placeholder_19o4e_1034 { @apply text-muted-foreground; -} \ No newline at end of file +} + diff --git a/components/comments/components/comment.tsx b/components/comments/components/comment.tsx index 6fc8280d..658fefb7 100644 --- a/components/comments/components/comment.tsx +++ b/components/comments/components/comment.tsx @@ -2,32 +2,24 @@ import { formatDistance } from 'date-fns'; import React, { useEffect, useRef, useState } from 'react'; import MaterialSymbolsKeyboardArrowDownRounded from '~icons/material-symbols/keyboard-arrow-down-rounded'; - - import Link from 'next/link'; - - import { useQueryClient } from '@tanstack/react-query'; - - import CommentInput from '@/components/comments/components/comment-input'; import CommentMenu from '@/components/comments/components/comment-menu'; import CommentVote from '@/components/comments/components/comment-vote'; import MDViewer from '@/components/markdown/viewer/MD-viewer'; +import TextExpand from '@/components/text-expand'; import H5 from '@/components/typography/h5'; import P from '@/components/typography/p'; import Small from '@/components/typography/small'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; import useAuth from '@/services/hooks/auth/useAuth'; - import { useCommentsContext } from '@/services/providers/comments-provider'; import getDeclensionWord from '@/utils/getDeclensionWord'; - - import Comments from './comments'; @@ -122,7 +114,9 @@ const Component = ({ comment, slug, content_type }: Props) => { isEdit /> ) : ( - {comment.text} + + {comment.text} + ) ) : (

Коментар видалено

diff --git a/components/entry-card/entry-card.tsx b/components/entry-card/entry-card.tsx index 16c2a5a6..db67ab07 100644 --- a/components/entry-card/entry-card.tsx +++ b/components/entry-card/entry-card.tsx @@ -10,6 +10,7 @@ import { import { UrlObject } from 'url'; import MaterialSymbolsImageNotSupportedOutlineRounded from '~icons/material-symbols/image-not-supported-outline-rounded'; +import { ImageProps } from 'next/image'; import Link from 'next/link'; import AnimeTooltip from '@/components/entry-card/components/anime-tooltip'; @@ -43,6 +44,9 @@ export interface Props { slug?: string; content_type?: API.ContentType; withContextMenu?: boolean; + posterProps?: { + priority?: boolean; + }; } const Tooltip = ({ @@ -84,6 +88,7 @@ const Content = memo( slug, content_type, withContextMenu, + posterProps, ...props }: Props, ref: ForwardedRef, @@ -117,12 +122,14 @@ const Content = memo( typeof poster === 'string' ? ( Poster ) : ( poster @@ -191,7 +198,6 @@ const Content = memo( const Component = forwardRef( (props: Props, ref: ForwardedRef) => { - if (props.withContextMenu && props.slug && props.content_type) { return ( void; disabled?: boolean; + inputRef: React.RefObject; } -const SearchToggle = ({ type, setType, disabled }: Props) => { +const SearchToggle = ({ type, setType, disabled, inputRef }: Props) => { + const handleOnValueChange = (value: API.ContentType) => { + value && setType(value); + inputRef.current?.focus(); + } + return ( { size="badge" variant="default" value={type} - onValueChange={(value: API.ContentType) => value && setType(value)} + onValueChange={handleOnValueChange} > Аніме Персонаж diff --git a/components/modals/search-modal/search-modal.tsx b/components/modals/search-modal/search-modal.tsx index 9716bcba..4eba1868 100644 --- a/components/modals/search-modal/search-modal.tsx +++ b/components/modals/search-modal/search-modal.tsx @@ -1,7 +1,9 @@ 'use client'; import * as React from 'react'; -import { ReactNode, useState } from 'react'; +import { ReactNode, useRef, useState } from 'react'; + + import CharacterSearchList from '@/components/modals/search-modal/components/character-search-list'; import PersonSearchList from '@/components/modals/search-modal/components/person-search-list'; @@ -9,10 +11,13 @@ import SearchToggle from '@/components/modals/search-modal/components/search-tog import { CommandDialog, CommandInput } from '@/components/ui/command'; import useDebounce from '@/services/hooks/useDebounce'; + + import AnimeSearchList from './components/anime-search-list'; import SearchButton from './components/search-button'; import useSearchModal from './components/useSearchModal'; + interface Props { onClick?: (content: API.Anime | API.Character | API.Person) => void; type?: 'link' | 'button'; @@ -21,6 +26,7 @@ interface Props { } const SearchModal = ({ onClick, type, content_type, children }: Props) => { + const inputRef = useRef(null); const [searchType, setSearchType] = useState( content_type || 'anime', ); @@ -50,12 +56,14 @@ const SearchModal = ({ onClick, type, content_type, children }: Props) => { >
setSearchValue(value)} placeholder="Пошук..." diff --git a/components/navbar/nav-dropdown.tsx b/components/navbar/nav-dropdown.tsx index cd396bf7..d05a4c5d 100644 --- a/components/navbar/nav-dropdown.tsx +++ b/components/navbar/nav-dropdown.tsx @@ -40,7 +40,7 @@ const Component = ({ routes, urlPrefix, showOnMobile, isEqualPath = true }: Prop - + {current && (

{current.title_ua}

)} diff --git a/components/navbar/sub-nav.tsx b/components/navbar/sub-nav.tsx index cf34c1b2..71567f5a 100644 --- a/components/navbar/sub-nav.tsx +++ b/components/navbar/sub-nav.tsx @@ -1,34 +1,28 @@ 'use client'; -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import useIsMobile from '@/services/hooks/useIsMobile'; -interface Props extends PropsWithChildren { - mobileOnly?: boolean; -} +interface Props extends PropsWithChildren {} -const Component = ({ children, mobileOnly }: Props) => { +const Component = ({ children }: Props) => { + const [isMounted, setIsMounted] = useState(false); const isMobile = useIsMobile(); - if (isMobile) { + useEffect(() => { + setIsMounted(true); + }, []); + + if (isMounted && isMobile) { return createPortal( <>{children}, document.getElementById('subbar-mobile')!, ); } - if (mobileOnly) { - return null; - } - - return createPortal( -
- {children} -
, - document.getElementById('subbar')!, - ); + return null; }; export default Component; diff --git a/components/text-expand.tsx b/components/text-expand.tsx new file mode 100644 index 00000000..fe057acf --- /dev/null +++ b/components/text-expand.tsx @@ -0,0 +1,46 @@ +import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'; + +import { Button } from '@/components/ui/button'; +import { cn } from '@/utils/utils'; + +const TextExpand = ({ children }: PropsWithChildren) => { + const ref = useRef(null); + const [isExpanded, setIsExpanded] = useState(false); + + useEffect(() => { + if (ref.current) { + setIsExpanded(!(ref.current.scrollHeight > 216)); + } + }, []); + + return ( +
+
+ {children} + {!isExpanded && ( +
+ )} +
+ {!isExpanded && ( +
+ +
+ )} +
+ ); +}; + +export default TextExpand; diff --git a/next.config.mjs b/next.config.mjs index ee587d8f..5efbe902 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -9,7 +9,6 @@ const nextConfig = { reactStrictMode: false, pageExtensions: ['js', 'jsx', 'ts', 'tsx'], images: { - unoptimized: true, remotePatterns: [ { protocol: 'https', diff --git a/services/api/config.ts b/services/api/config.ts index cf2ead9a..0be4b642 100644 --- a/services/api/config.ts +++ b/services/api/config.ts @@ -4,8 +4,5 @@ export default { headers: { 'Content-type': 'application/json', }, - next: { - revalidate: 0, - }, }, }; diff --git a/tailwind.config.js b/tailwind.config.js index c18c6aca..1839d3f4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -19,13 +19,11 @@ module.exports = { }, }, extend: { + gridAutoColumns: { + 'scroll': 'minmax(var(--grid-min, 7rem), 1fr)', + }, gridTemplateColumns: { - 'scroll-2': 'repeat(2, minmax(var(--grid-min, 7rem), 1fr))', - 'scroll-3': 'repeat(3, minmax(var(--grid-min, 7rem), 1fr))', - 'scroll-4': 'repeat(4, minmax(var(--grid-min, 7rem), 1fr))', - 'scroll-5': 'repeat(5, minmax(var(--grid-min, 7rem), 1fr))', - 'scroll-6': 'repeat(6, minmax(var(--grid-min, 7rem), 1fr))', - 'scroll-7': 'repeat(7, minmax(var(--grid-min, 7rem), 1fr))', + 'scroll': 'repeat(auto-fit, minmax(var(--grid-min, 7rem), 1fr))', }, fontFamily: { sans: ['var(--font-inter)'],