From 4a125c8cd7e6b9298b1dc630bd6dee2bfd8197a6 Mon Sep 17 00:00:00 2001
From: Andrii Blacksmith <coderpy4@proton.me>
Date: Tue, 25 Jun 2024 01:33:34 +0300
Subject: [PATCH] style(edit-content): new content block

---
 features/edit/edit-content/details.tsx        | 51 +++++++++++--------
 .../edit-content/edit-content.component.tsx   | 29 ++---------
 features/edit/edit-content/general.tsx        | 28 ----------
 3 files changed, 33 insertions(+), 75 deletions(-)
 delete mode 100644 features/edit/edit-content/general.tsx

diff --git a/features/edit/edit-content/details.tsx b/features/edit/edit-content/details.tsx
index d06b9c48..1c932947 100644
--- 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
index f7b87739..22c22048 100644
--- 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
deleted file mode 100644
index 9eaa270b..00000000
--- a/features/edit/edit-content/general.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import Link from 'next/link';
-import { FC } from 'react';
-
-import ContentCard from '@/components/content-card/content-card';
-
-interface Props {
-    href: string;
-    image: string;
-    title: string;
-}
-
-const General: FC<Props> = ({ href, title, image }) => {
-    return (
-        <>
-            <div className="hidden w-full items-center gap-4 px-16 md:px-48 lg:flex lg:px-0">
-                <ContentCard href={href} image={image} />
-            </div>
-            <div className="flex w-full gap-4 lg:hidden">
-                <div className="w-12">
-                    <ContentCard href={href} image={image} />
-                </div>
-                <Link href={href}>{title}</Link>
-            </div>
-        </>
-    );
-};
-
-export default General;