Merge pull request #63 from rosset-nocpes/homepage-comment-improve

add to homepage comments their source
hikka-io · Jul 14, 2024 · 93d8d23 · 93d8d23
2 parents 7f979dd + f2f913f
commit 93d8d23
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 49 deletions.
diff --git a/components/comments/global-comment.tsx b/components/comments/global-comment.tsx
@@ -2,11 +2,14 @@ import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import { FC } from 'react';
 import BxBxsUpvote from '~icons/bx/bxs-upvote';
+import MaterialSymbolsArticle from '~icons/material-symbols/article';
 
 import H5 from '@/components/typography/h5';
 import Small from '@/components/typography/small';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 
+import { CONTENT_TYPE_LINKS } from '@/utils/constants';
+
 import MDViewer from '../markdown/viewer/MD-viewer';
 import { Label } from '../ui/label';
 
@@ -17,58 +20,65 @@ interface Props {
 
 const GlobalComment: FC<Props> = ({ comment, href }) => {
     return (
-        <div
-            className="flex w-full scroll-mt-20 flex-col gap-2"
-            id={comment.reference}
-        >
-            <div className="flex w-full flex-col items-start gap-2">
-                <div className="flex w-full gap-3">
-                    <Link href={`/u/${comment.author.username}`}>
-                        <Avatar className="w-10 rounded-md">
-                            <AvatarImage
-                                className="rounded-md"
-                                src={comment.author.avatar}
-                                alt="avatar"
-                            />
-                            <AvatarFallback className="rounded-md">
-                                {comment.author.username[0]}
-                            </AvatarFallback>
-                        </Avatar>
+        <div className="flex w-full flex-col items-start gap-4">
+            <div className="flex w-full gap-3">
+                <Link href={`/u/${comment.author.username}`}>
+                    <Avatar className="w-10 rounded-md">
+                        <AvatarImage
+                            className="rounded-md"
+                            src={comment.author.avatar}
+                            alt="avatar"
+                        />
+                        <AvatarFallback className="rounded-md">
+                            {comment.author.username[0]}
+                        </AvatarFallback>
+                    </Avatar>
+                </Link>
+                <div className="flex flex-1 flex-col justify-between">
+                    <Link
+                        href={`/u/${comment.author.username}`}
+                        className="w-fit"
+                    >
+                        <H5>{comment.author.username}</H5>
                     </Link>
-                    <div className="flex flex-1 flex-col justify-between">
-                        <Link
-                            href={`/u/${comment.author.username}`}
-                            className="w-fit"
-                        >
-                            <H5>{comment.author.username}</H5>
-                        </Link>
 
-                        <Small className="text-muted-foreground">
-                            {formatDistance(
-                                comment.created * 1000,
-                                Date.now(),
-                                { addSuffix: true },
-                            )}
-                        </Small>
-                    </div>
-                    {comment.vote_score > 0 && (
-                        <div className="flex flex-1 items-start justify-end">
-                            <div className="flex items-center gap-1">
-                                <BxBxsUpvote className="size-3 text-success" />
-                                <Label className="leading-none text-success">
-                                    {comment.vote_score}
-                                </Label>
-                            </div>
-                        </div>
-                    )}
+                    <Small className="text-muted-foreground">
+                        {formatDistance(comment.created * 1000, Date.now(), {
+                            addSuffix: true,
+                        })}
+                    </Small>
                 </div>
-
-                <Link href={href} className="hover:underline">
-                    <MDViewer className="line-clamp-2 text-sm">
-                        {comment.text}
-                    </MDViewer>
-                </Link>
+                {comment.vote_score > 0 && (
+                    <div className="flex flex-1 items-start justify-end">
+                        <div className="flex items-center gap-1">
+                            <BxBxsUpvote className="size-3 text-success" />
+                            <Label className="leading-none text-success">
+                                {comment.vote_score}
+                            </Label>
+                        </div>
+                    </div>
+                )}
             </div>
+
+            <Link href={href} className="hover:underline">
+                <MDViewer className="line-clamp-2 text-sm">
+                    {comment.text}
+                </MDViewer>
+            </Link>
+
+            <Link
+                href={`${CONTENT_TYPE_LINKS[comment.content_type]}/${comment.preview.slug}`}
+                className="flex items-center gap-1 text-primary hover:underline"
+            >
+                <MaterialSymbolsArticle className="text-muted-foreground" />
+                <Small className="line-clamp-1">
+                    {comment.content_type === 'collection'
+                        ? `Колекція ${comment.preview.title}`
+                        : comment.content_type === 'edit'
+                          ? `Правка #${comment.preview.slug}`
+                          : comment.preview.title}
+                </Small>
+            </Link>
         </div>
     );
 };

diff --git a/types/api.d.ts b/types/api.d.ts
@@ -408,7 +408,11 @@ declare global {
             is_editable: boolean;
             parent: string | null;
             content_type: API.ContentType;
-            preview: { slug: string; image?: string };
+            preview: {
+                title?: string;
+                slug: string;
+                image?: string;
+            };
         };
 
         type External = {