Skip to content

Commit

Permalink
refactor: make consistent layout for character-tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@olexh
olexh committed May 16, 2024
1 parent 425006d commit 46904f4
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 80 deletions.
123 changes: 52 additions & 71 deletions components/content-card/components/character-tooltip.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
'use client';

import * as React from 'react';
import { FC, PropsWithChildren, memo } from 'react';

import Link from 'next/link';

import ContentCard from '@/components/content-card/content-card';
import MDViewer from '@/components/markdown/viewer/MD-viewer';
import H5 from '@/components/typography/h5';
import { Badge } from '@/components/ui/badge';
import {
HoverCard,
HoverCardArrow,
Expand All @@ -16,13 +12,9 @@ import {
HoverCardTrigger,
} from '@/components/ui/hover-card';
import { Label } from '@/components/ui/label';
import WatchListButton from '@/components/watchlist-button/watchlist-button';
import ContentCard from '@/components/content-card/content-card';

import useCharacterInfo from '@/services/hooks/characters/useCharacterInfo';
import useCharacterAnime from '@/services/hooks/characters/useCharacterAnime';
import useSession from '@/services/hooks/auth/useSession';
import { MEDIA_TYPE, RELEASE_STATUS } from '@/utils/constants';
import useCharacterAnime from '@/services/hooks/characters/useCharacterAnime';
import useCharacterInfo from '@/services/hooks/characters/useCharacterInfo';

interface TooltipDataProps {
slug: string;
Expand All @@ -36,86 +28,75 @@ interface Props extends PropsWithChildren {
const TooltipData: FC<TooltipDataProps> = ({ slug }) => {
const { user: loggedUser } = useSession();
const { data } = useCharacterInfo({ slug });
const anime = useCharacterAnime({ slug });
anime?.list?.sort((a, b) => b.anime.score - a.anime.score)
const { list } = useCharacterAnime({ slug });

const characterAnime = list?.sort(
(a, b) => b.anime.score - a.anime.score,
)[0];

if (!data) {
return (
<div className="flex w-96 gap-4 text-left animate-pulse">
<div className="w-18 sm:w-20">
<div className="h-20 flex-1 rounded-lg bg-secondary/60" />
</div>
<div className="flex w-96 animate-pulse gap-4 text-left">
<div className="h-28 w-20 rounded-lg bg-secondary/60" />
<div className="flex w-full flex-1 flex-col gap-2">
<div className="flex flex-col gap-2">
<div className="flex w-full flex-1 flex-col gap-2">
<div className="h-5 w-20 rounded-lg bg-secondary/60" />
<div className="h-3 w-full rounded-lg bg-secondary/60" />
<div className="h-3 w-full rounded-lg bg-secondary/60" />
<div className="h-3 w-full rounded-lg bg-secondary/60" />
<div className="h-2 w-full rounded-lg bg-secondary/60" />
<div className="h-2 w-full rounded-lg bg-secondary/60" />
<div className="h-2 w-full rounded-lg bg-secondary/60" />
</div>
</div>
</div>
<div className="flex flex-2 flex-col gap-2">
<div className="h-4 w-10 rounded-lg bg-secondary/60" />
<div className="flex-1 rounded-lg bg-secondary/60" />
<div className="flex flex-col gap-2">
<div className="h-14 w-10 rounded-lg bg-secondary/60" />
</div>
</div>);
</div>
);
}

return (
<>
{data.description_ua && anime.list ? (
<div className="flex w-96 gap-4 text-left">
<div className="w-18 sm:w-20">
<ContentCard poster={data.image} containerRatio={0.7} href={'/characters/' + data.slug}/>
</div>
<div className="flex w-full flex-1 flex-col gap-2">
<div className="flex items-center gap-2">
<Label className="line-clamp-2 font-bold">
{data.name_ua || data.name_en || data.name_ja}
</Label>
</div>
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<MDViewer className="break-normal whitespace-normal lmb-3 text-sm text-muted-foreground md:line-clamp-3">
{data.description_ua}
</MDViewer>
</div>
</div>
</div>
{(anime.list[0] && (
<div className="flex flex-2 flex-col gap-2">
<Label className="text-muted-foreground">
Аніме
</Label>
<ContentCard
poster={anime.list[0].anime.poster} containerRatio={0.7}
href={'/anime/' + anime.list[0].anime.slug}
/>
</div>
))}
</div>)
:(
<div className="flex w-min gap-4 text-left">
<div className="flex w-min flex-1 flex-col gap-2">
<div className="flex items-center gap-2">
<div className="w-18 sm:w-20">
<ContentCard poster={data.image} containerRatio={0.7} href={'/characters/' + data.slug}/>
</div>
</div>
<div className="flex flex-col gap-2">
<Label className="line-clamp-2 font-bold">
{data.name_ua || data.name_en || data.name_ja}
</Label>
</div>
<div className="flex w-96 gap-4 text-left">
<ContentCard
className="w-20"
poster={data.image}
containerRatio={0.7}
href={'/characters/' + data.slug}
/>
<div className="flex w-full flex-1 flex-col gap-2">
<div className="flex items-center gap-2">
<Label className="line-clamp-2 font-bold">
{data.name_ua || data.name_en || data.name_ja}
</Label>
</div>
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<MDViewer className="whitespace-normal break-normal text-sm text-muted-foreground md:line-clamp-3">
{data.description_ua}
</MDViewer>
</div>
</div>
</div>
{characterAnime && (
<div className="flex flex-col gap-2">
<ContentCard
className="w-10"
poster={characterAnime.anime.poster}
containerRatio={0.7}
href={'/anime/' + characterAnime.anime.slug}
/>
</div>
)}
</>
</div>
);
};

const CharacterTooltip: FC<Props> = ({ slug, children, withTrigger, ...props }) => {
const CharacterTooltip: FC<Props> = ({
slug,
children,
withTrigger,
...props
}) => {
if (!slug) {
return null;
}
Expand Down
6 changes: 3 additions & 3 deletions components/ui/hover-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const HoverCardContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
'z-50 w-16 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
className,
)}
{...props}
Expand All @@ -33,8 +33,8 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;

export {
HoverCard,
HoverCardTrigger,
HoverCardArrow,
HoverCardContent,
HoverCardPortal,
HoverCardArrow,
HoverCardTrigger,
};
6 changes: 3 additions & 3 deletions next.config.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import bundleAnalyzer from '@next/bundle-analyzer';
import Icons from 'unplugin-icons/webpack';

import bundleAnalyzer from '@next/bundle-analyzer';

/** @type {import('next').NextConfig} */
const nextConfig = {
eslint: {
Expand Down Expand Up @@ -31,7 +32,7 @@ const nextConfig = {
async rewrites() {
return [
{
source: "/api/:path*",
source: '/api/:path*',
destination: `${process.env.API_URL}/:path*`,
},
];
Expand All @@ -41,5 +42,4 @@ const withBundleAnalyzer = bundleAnalyzer({
enabled: process.env.ANALYZE === 'true',
});


export default withBundleAnalyzer(nextConfig);
5 changes: 2 additions & 3 deletions services/api/characters/getCharacterAnime.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import {
BaseFetchRequestProps,
FetchRequestProps,
fetchRequest,
} from '@/services/api/fetchRequest';

export interface Response extends API.WithPagination<Anime> {}
export interface Response extends API.WithPagination<CharacterAnime> {}

export type Anime = {
export type CharacterAnime = {
main: boolean;
anime: API.Anime;
};
Expand Down

0 comments on commit 46904f4

Please sign in to comment.