style(edit-content): new content block

hikka-io · Jun 24, 2024 · 4a125c8 · 4a125c8
1 parent 504f773
commit 4a125c8
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 75 deletions.
diff --git a/features/edit/edit-content/details.tsx b/features/edit/edit-content/details.tsx
@@ -1,13 +1,15 @@
 import { FC } from 'react';
 
 import P from '@/components/typography/p';
-import { Label } from '@/components/ui/label';
+import HorizontalContentCard from '@/components/ui/horizontal-content-card';
 
 interface Props {
     content: API.MainContent;
+    href: string;
+    poster: string;
 }
 
-const Details: FC<Props> = ({ content }) => {
+const Details: FC<Props> = ({ content, href, poster }) => {
     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;
@@ -20,27 +22,34 @@ const Details: FC<Props> = ({ content }) => {
                 ? content.name_ja
                 : content.name_native;
 
+    console.log(title_en, title_ua, title_ja);
+
     return (
-        <div className="flex flex-col gap-4 rounded-md border border-secondary/60 bg-secondary/30 p-4">
-            <div className="flex flex-col gap-2">
-                <Label className="text-muted-foreground">
-                    {'title_ua' in content ? 'Назва' : 'Імʼя'} українською
-                </Label>
-                <P className="text-sm">{title_ua || '-'}</P>
-            </div>
-            <div className="flex flex-col gap-2">
-                <Label className="text-muted-foreground">
-                    {'title_en' in content ? 'Назва' : 'Імʼя'} англійською
-                </Label>
-                <P className="text-sm">{title_en || '-'}</P>
-            </div>
-            <div className="flex flex-col gap-2">
-                <Label className="text-muted-foreground">
-                    {'title_ja' in content ? 'Назва оригіналу' : 'Рідне імʼя'}
-                </Label>
-                <P className="text-sm">{title_ja || '-'}</P>
+        <HorizontalContentCard
+            href={href}
+            image={poster}
+            title={title_ua || title_en || title_ja}
+            size="sm"
+        >
+            <div className="flex h-full flex-col text-xs text-muted-foreground">
+                <P className="line-clamp-1">
+                    {title_ua !== null
+                        ? title_en
+                        : title_en !== null
+                          ? title_ja
+                          : null}
+                </P>
+                <P className="line-clamp-1">
+                    {title_en === null
+                        ? title_ua === null
+                            ? title_ja
+                            : null
+                        : title_ua !== null
+                          ? title_ja
+                          : null}
+                </P>
             </div>
-        </div>
+        </HorizontalContentCard>
     );
 };
 

diff --git a/features/edit/edit-content/edit-content.component.tsx b/features/edit/edit-content/edit-content.component.tsx
@@ -1,14 +1,11 @@
 'use client';
 
-import * as React from 'react';
 import { FC } from 'react';
 
+import H4 from '@/components/typography/h4';
 import Block from '@/components/ui/block';
-import { Button } from '@/components/ui/button';
-import Header from '@/components/ui/header';
 
 import Details from '@/features/edit/edit-content/details';
-import General from '@/features/edit/edit-content/general';
 
 import { CONTENT_TYPE_LINKS } from '@/utils/constants';
 import { getTitle } from '@/utils/title-adapter';
@@ -20,8 +17,6 @@ interface Props {
 }
 
 const EditContent: FC<Props> = ({ slug, content_type, content }) => {
-    const [type, setType] = React.useState<'general' | 'details'>('details');
-
     if (!content) {
         return null;
     }
@@ -33,26 +28,8 @@ const EditContent: FC<Props> = ({ slug, content_type, content }) => {
 
     return (
         <Block>
-            <Header title="Контент" variant="h4">
-                <Button
-                    variant={type === 'details' ? 'secondary' : 'outline'}
-                    size="badge"
-                    onClick={() => setType('details')}
-                >
-                    Деталі
-                </Button>
-                <Button
-                    variant={type === 'general' ? 'secondary' : 'outline'}
-                    size="badge"
-                    onClick={() => setType('general')}
-                >
-                    Загальне
-                </Button>
-            </Header>
-            {type === 'general' && (
-                <General href={link} image={image} title={title} />
-            )}
-            {type === 'details' && <Details content={content} />}
+            <H4>Контент</H4>
+            <Details content={content} href={link} poster={image} />
         </Block>
     );
 };

diff --git a/features/edit/edit-content/general.tsx b/features/edit/edit-content/general.tsx