Update thread card design

apps/web/package.json

@@ -26,6 +26,7 @@
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "v2",
     "@reduxjs/toolkit": "^1.9.3",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@tanstack/react-query": "^4.20.4",
     "@trpc/client": "10.7.0",
     "@trpc/next": "10.7.0",

apps/web/src/components/ThreadCard/ThreadCard.test.tsx

@@ -0,0 +1,31 @@
+import { screen, fireEvent, render } from "@testing-library/react";
+import { ThreadCard } from "./ThreadCard";
+
+describe("<ThreadCard />", () => {
+  const onClick = jest.fn();
+  const sampleThread = {
+    id: "sample-id",
+    title: "title",
+    body: "body",
+    createdAt: new Date().toISOString(),
+    user: {
+      userPlatforms: [
+        {
+          platformAvatar: "https://some.com",
+          platformUsername: "sample-username",
+        },
+      ],
+    },
+  };
+
+  it("should render the component with no issues", () => {
+    const result = render(<ThreadCard thread={sampleThread} />);
+    expect(result.container).toBeInTheDocument();
+  });
+
+  it("should call onclick prop on card click", () => {
+    const result = render(<ThreadCard thread={sampleThread} onClick={onClick} />);
+    fireEvent.click(screen.getAllByText("title")[0]);
+    expect(onClick).toBeCalledTimes(1);
+  });
+});

apps/web/src/components/ThreadCard/ThreadCard.tsx

@@ -0,0 +1,32 @@
+import { FlexColumn, FlexRow } from "../Flex";
+import { AvatarCard } from "../AvatarCard";
+import { get } from "lodash";
+import { ThreadCardProps } from "./types";
+
+export const ThreadCard = (props: ThreadCardProps) => {
+  const { id, title, body, createdAt, user } = props.thread;
+
+  return (
+    <div className="rounded-2xl border bg-white p-4" onClick={props.onClick}>
+      <FlexColumn classes="gap-2">
+        <div className="text-xl line-clamp-2">{title}</div>
+        <div className="text-gray-500 line-clamp-2">{body}</div>
+        <FlexRow classes="text-sm gap-3">
+          <AvatarCard
+            imageSize={20}
+            image={get(user, "userPlatforms[0].platformAvatar")}
+            name={get(user, "userPlatforms[0].platformUsername")}
+          />
+          <div>&#8226;</div>
+          <div>
+            {new Date(createdAt).toLocaleDateString("en-gb", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            })}
+          </div>
+        </FlexRow>
+      </FlexColumn>
+    </div>
+  );
+};

apps/web/src/components/ThreadCard/index.tsx

@@ -1,36 +1 @@
-import Link from "next/link";
-import Image from "next/image";
-
-const ThreadCard = ({ thread }) => {
-  const { id, title, author, createdAt, user } = thread;
-
-  return (
-    <Link href={`/${id}`} passHref>
-      <div className="min-h-[180px] cursor-pointer rounded-[16px] border-[1px] border-[#EBEAEB] bg-white hover:border-[#08010D]">
-        <div className="space-y-[8px] px-[10px] pt-[14px] pb-[10px] sm:px-[24px] sm:pt-[28px] sm:pb-[20px]">
-          <div className="flex items-center gap-3">
-            <Image
-              width={32}
-              height={32}
-              className="rounded-full"
-              src={user.userPlatforms[0].platformAvatar || "https://placekitten.com/200/200"}
-              alt=""
-            />
-            <div>
-              <div className="font-semibold">
-                {user.userPlatforms[0].platformUsername}
-              </div>
-              <div className="font-light text-gray-400">{author.id}</div>
-            </div>
-          </div>
-          <div className="text-[24px] font-semibold text-gray-700">{title}</div>
-        </div>
-        <div className="font-ibm flex items-center justify-end border-t-[1px] border-[#EBEAEB] px-[10px] pt-[7px] text-[11px] text-gray-400">
-          <div>{new Date(createdAt).toLocaleString()}</div>
-        </div>
-      </div>
-    </Link>
-  );
-};
-
-export default ThreadCard;
+export * from "./ThreadCard";

apps/web/src/components/ThreadCard/types.ts

@@ -0,0 +1,12 @@
+export interface Thread {
+    id: string;
+    title: string;
+    body: string;
+    createdAt: string;
+    user: any;
+}
+
+export interface ThreadCardProps {
+    thread: Thread;
+    onClick?(): void;
+}

apps/web/src/pages/[id]/community.tsx

@@ -4,7 +4,7 @@ import { Layout } from "../../components/Layout";
 import { Back } from "../../components/Button/Back/Back";
 import { useEffect, useState } from "react";
 import { Tab } from "@headlessui/react";
-import ThreadCard from "../../components/ThreadCard";
+import { ThreadCard } from "../../components/ThreadCard";
 import * as utils from "../../utils";
 import { FlexColumn, FlexRow } from "../../components/Flex";
 import { Search } from "../../components/Search";

apps/web/src/pages/[id]/profile.tsx

@@ -6,7 +6,7 @@ import { Layout } from "../../components/Layout";
 import { Back } from "../../components/Button/Back/Back";
 import { useEffect, useState } from "react";
 import { Tab } from "@headlessui/react";
-import ThreadCard from "../../components/ThreadCard";
+import { ThreadCard } from "../../components/ThreadCard";
 import * as utils from "../../utils";
 import { FlexColumn, FlexRow } from "../../components/Flex";
 import { trpc } from "../../utils/trpc";

apps/web/src/pages/index.tsx

@@ -2,7 +2,7 @@ import { type NextPage } from "next";
 import { useEffect, useState } from "react";
 import { Layout } from "../components/Layout";
 import { toast } from "react-toastify";
-import ThreadCard from "../components/ThreadCard";
+import { ThreadCard } from "../components/ThreadCard";
 import { useAccount } from "wagmi";
 import { trpc } from "../utils/trpc";
 import { Modal } from "../components/Modal";

apps/web/tailwind.config.cjs

@@ -4,5 +4,7 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/line-clamp'),
+  ],
 };

yarn.lock

@@ -510,9 +510,9 @@
     tweetnacl "^1.0.3"
     uint8arrays "^4.0.3"
 
-"@ceramicnetwork/cli@next":
+"@ceramicnetwork/cli@2.28.0":
   version "2.28.0"
-  resolved "https://registry.npmjs.org/@ceramicnetwork/cli/-/cli-2.28.0.tgz"
+  resolved "https://registry.yarnpkg.com/@ceramicnetwork/cli/-/cli-2.28.0.tgz#d4cc100dfc1401d22e669603b9ebfa55e8c490b1"
   integrity sha512-jpjuN+nzhJYGxyvAdnFADu6J2xICM0clGf7agzSmhduUmXV5cNGu5UW0h+7LlW4iiK1ddUWlmYYUh1nzWKulnQ==
   dependencies:
     "@awaitjs/express" "^0.9.0"
@@ -3340,6 +3340,11 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
+"@tailwindcss/line-clamp@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423"
+  integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
+
 "@tanstack/[email protected]":
   version "4.15.1"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.15.1.tgz#a282f04fe5e612b50019e1cfaf0efabd220e00ce"