add content info in edit page

app/(pages)/edit/[editId]/page.tsx

@@ -13,7 +13,7 @@ import getEdit from '@/services/api/edit/getEdit';
 import getQueryClient from '@/utils/getQueryClient';
 
 import EditView from '../_components/edit-view';
-import Content from '../_components/ui/content';
+import Content from '../_components/ui/content/content';
 import EditStatus from '../_components/ui/edit-status';
 import Actions from './_components/actions';
 import Author from './_components/author';

app/(pages)/edit/_components/ui/content/_components/details.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { Label } from '@/components/ui/label';
+
+interface Props {
+    content: API.AnimeInfo | API.Character;
+}
+
+const Component = ({ content }: Props) => {
+    const title_ua = 'title_ua' in content ? content.title_ua : content.name_ua;
+    const title_en = 'title_en' in content ? content.title_en : content.name_en;
+    const title_ja = 'title_ja' in content ? content.title_ja : content.name_ja;
+
+    return (
+        <div className="bg-secondary/30 border border-secondary/60 p-4 rounded-md flex flex-col gap-4">
+            <div className="flex-col gap-2">
+                <Label className="text-muted-foreground">
+                    Назва українською
+                </Label>
+                <p className="text-sm">{title_ua || '-'}</p>
+            </div>
+            <div className="flex-col gap-2">
+                <Label className="text-muted-foreground">
+                    Назва англійською
+                </Label>
+                <p className="text-sm">{title_en || '-'}</p>
+            </div>
+            <div className="flex-col gap-2">
+                <Label className="text-muted-foreground">Назва оригіналу</Label>
+                <p className="text-sm">{title_ja || '-'}</p>
+            </div>
+        </div>
+    );
+};
+
+export default Component;

app/(pages)/edit/_components/ui/content/_components/general.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import Link from 'next/link';
+
+import BaseCard from '@/components/ui/base-card';
+
+interface Props {
+    href: string;
+    poster: string;
+    title: string;
+}
+
+const Component = ({ href, title, poster }: Props) => {
+    return (
+        <>
+            <div className="hidden w-full items-center gap-4 px-16 md:px-48 lg:flex lg:px-0">
+                <BaseCard href={href} poster={poster} />
+            </div>
+            <div className="flex w-full gap-4 lg:hidden">
+                <div className="w-12">
+                    <BaseCard href={href} poster={poster} />
+                </div>
+                <Link href={href}>{title}</Link>
+            </div>
+        </>
+    );
+};
+
+export default Component;

app/(pages)/edit/_components/ui/content/content.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import * as React from 'react';
+
+import General from '@/app/(pages)/edit/_components/ui/content/_components/general';
+import SubHeader from '@/components/sub-header';
+import { Button } from '@/components/ui/button';
+import { useSettingsContext } from '@/services/providers/settings-provider';
+import { CONTENT_TYPE_LINKS } from '@/utils/constants';
+
+import Details from './_components/details';
+
+interface Props {
+    slug: string;
+    content_type: API.ContentType;
+    content?: API.AnimeInfo | API.Character;
+}
+
+const Component = ({ slug, content_type, content }: Props) => {
+    const [type, setType] = React.useState<'general' | 'details'>('general');
+    const { titleLanguage } = useSettingsContext();
+
+    if (!content) {
+        return null;
+    }
+
+    const link = `${CONTENT_TYPE_LINKS[content_type]}/${slug}`;
+
+    const poster = 'poster' in content ? content.poster : content.image;
+    const title =
+        'title_en' in content
+            ? content[titleLanguage!] ||
+              content.title_ua ||
+              content.title_en ||
+              content.title_ja
+            : content.name_ua || content.name_en;
+
+    return (
+        <div className="flex flex-col gap-8">
+            <SubHeader title="Контент" variant="h4">
+                <Button
+                    variant={type === 'general' ? 'secondary' : 'outline'}
+                    size="badge"
+                    onClick={() => setType('general')}
+                >
+                    Загальне
+                </Button>
+                <Button
+                    variant={type === 'details' ? 'secondary' : 'outline'}
+                    size="badge"
+                    onClick={() => setType('details')}
+                >
+                    Деталі
+                </Button>
+            </SubHeader>
+            {type === 'general' && (
+                <General href={link} poster={poster} title={title} />
+            )}
+            {type === 'details' && <Details content={content} />}
+        </div>
+    );
+};
+
+export default Component;

app/(pages)/edit/_components/ui/content/index.ts

@@ -0,0 +1,3 @@
+import Content from './content';
+
+export default Content;

app/(pages)/edit/new/page.tsx

@@ -10,7 +10,7 @@ import getAnimeInfo from '@/services/api/anime/getAnimeInfo';
 import getCharacterInfo from '@/services/api/characters/getCharacterInfo';
 import getQueryClient from '@/utils/getQueryClient';
 
-import Content from '../_components/ui/content';
+import Content from '../_components/ui/content/content';
 import EditForm from '../_components/edit-form';
 import RulesAlert from './_components/rules-alert';