Merge pull request #84 from rosset-nocpes/style/improved-edit-details

style(edit-details): improve style
hikka-io · Dec 18, 2024 · e1683d1 · e1683d1
2 parents 26de98a + b84464b
commit e1683d1
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 34 deletions.
diff --git a/src/features/edit/edit-content/edit-content.component.tsx b/src/features/edit/edit-content/edit-content.component.tsx
@@ -1,44 +1,58 @@
 'use client';
 
-import * as React from 'react';
+import Link from 'next/link';
 import { FC } from 'react';
+import MaterialSymbolsArrowRightAltRounded from '~icons/material-symbols/arrow-right-alt-rounded';
 
+import H3 from '@/components/typography/h3';
 import Block from '@/components/ui/block';
-import Header from '@/components/ui/header';
+import { Button } from '@/components/ui/button';
 
 import Details from '@/features/edit/edit-content/details';
-import General from '@/features/edit/edit-content/general';
 
-import { getTitle } from '@/utils/adapters/convert-title';
 import { CONTENT_TYPE_LINKS } from '@/utils/constants/navigation';
 
+import General from './general';
+
 interface Props {
     slug: string;
     content_type: API.ContentType;
     content?: API.MainContent;
 }
 
 const EditContent: FC<Props> = ({ slug, content_type, content }) => {
-    const [type, setType] = React.useState<'general' | 'details'>('details');
-
     if (!content) {
         return null;
     }
 
     const link = `${CONTENT_TYPE_LINKS[content_type]}/${slug}`;
 
-    const image = content.data_type === 'anime' ? content.image : content.image;
-    const title = getTitle({ data: content, titleLanguage: 'title_ua' });
-
     return (
         <Block>
-            <Header
-                href={link}
-                linkProps={{ target: '_blank' }}
-                title="Контент"
-            ></Header>
-            <Details content={content} />
-            <General image={image} title={title} />
+            <div className="flex items-center justify-between gap-2">
+                <div className="flex flex-1 items-center gap-4 overflow-hidden">
+                    <Link
+                        href={link}
+                        target="_blank"
+                        className="hover:underline"
+                    >
+                        <H3>Контент</H3>
+                    </Link>
+                </div>
+                <Button size="icon-sm" variant="outline" asChild>
+                    <Link href={link} target="_blank">
+                        <MaterialSymbolsArrowRightAltRounded className="text-lg" />
+                    </Link>
+                </Button>
+            </div>
+            <div className="flex flex-col gap-4">
+                <General
+                    content={content}
+                    content_type={content_type}
+                    slug={slug}
+                />
+                <Details content={content} />
+            </div>
         </Block>
     );
 };

diff --git a/src/features/edit/edit-content/general.tsx b/src/features/edit/edit-content/general.tsx
@@ -1,26 +1,49 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
+import MaterialSymbolsCalendarClockRounded from '~icons/material-symbols/calendar-clock-rounded';
+import MaterialSymbolsCategoryOutlineRounded from '~icons/material-symbols/category-outline-rounded';
 
-import ContentCard from '@/components/content-card/content-card';
-import { Label } from '@/components/ui/label';
+import Card from '@/components/ui/card';
+import HorizontalCard from '@/components/ui/horizontal-card';
 
-interface Props {
-    image: string;
-    title: string;
+import { CONTENT_TYPES } from '@/utils/constants/common';
+import { CONTENT_TYPE_LINKS } from '@/utils/constants/navigation';
+
+interface Props extends PropsWithChildren {
+    content: API.MainContent;
+    content_type: API.ContentType;
+    slug: string;
 }
 
-const General: FC<Props> = ({ title, image }) => {
+const General: FC<Props> = ({ content, content_type, slug }) => {
+    const image = content.data_type === 'anime' ? content.image : content.image;
+    const link = `${CONTENT_TYPE_LINKS[content_type]}/${slug}`;
+
     return (
-        <>
-            <div className="hidden w-full items-center gap-4 px-16 md:px-48 lg:flex lg:px-0">
-                <ContentCard image={image} />
-            </div>
-            <div className="flex w-full gap-4 lg:hidden">
-                <div className="w-12">
-                    <ContentCard image={image} />
-                </div>
-                <Label>{title}</Label>
-            </div>
-        </>
+        <Card className="w-full">
+            <HorizontalCard
+                image={image}
+                imageContainerClassName="w-14"
+                title="Інформація"
+                titleClassName="font-semibold"
+                description={
+                    <div className="flex gap-1">
+                        <MaterialSymbolsCategoryOutlineRounded className="size-4 text-muted-foreground" />
+                        {CONTENT_TYPES[content_type].title_ua}
+                    </div>
+                }
+                meta={
+                    (content.data_type === 'anime' ||
+                        content.data_type === 'manga' ||
+                        content.data_type === 'novel') && (
+                        <div className="flex cursor-default items-center gap-1.5 font-medium">
+                            <MaterialSymbolsCalendarClockRounded className="size-4 text-muted-foreground" />
+                            {content.year}
+                        </div>
+                    )
+                }
+                href={link || '#'}
+            />
+        </Card>
     );
 };