refactor: finished tailwind

src/common/component/Message/PreviewMessage.tsx

@@ -1,9 +1,7 @@
 import { FC } from "react";
 import clsx from "clsx";
-import dayjs from "dayjs";
 import renderContent from "./renderContent";
 import Avatar from "../Avatar";
-import StyledWrapper from "./styled";
 import { useAppSelector } from "../../../app/store";
 
 interface Props {
@@ -16,20 +14,19 @@ const PreviewMessage: FC<Props> = ({ mid = 0, context }) => {
     return { msg: store.message[mid], usersData: store.users.byId };
   });
   if (!msg) return null;
-  const { from_uid = 0, created_at, content_type, content, thumbnail = "", properties } = msg;
+  const { from_uid = 0, content_type, content, thumbnail = "", properties } = msg;
   const { name, avatar } = usersData[from_uid] ?? {};
   const pinMsg = context == "pin";
   return (
-    <StyledWrapper className={clsx(`preview`, pinMsg && "max-h-64 !bg-transparent overflow-auto overflow-x-hidden border border-solid border-gray-200 dark:border-gray-400")}>
-      <div className="avatar">
+    <div className={clsx(`w-full relative flex items-start gap-3 p-2 my-2 rounded-lg`, pinMsg && "max-h-64 overflow-auto overflow-x-hidden border border-solid border-gray-200 dark:border-gray-400")}>
+      <div>
         <Avatar width={40} height={40} src={avatar} name={name} />
       </div>
-      <div className="details">
-        <div className="up">
-          <span className="name">{name}</span>
-          <i className="time">{dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}</i>
+      <div className="w-full flex flex-col items-start">
+        <div className="flex items-center gap-2 font-semibold">
+          <span className="text-gray-500 text-sm">{name}</span>
         </div>
-        <div className={`down`}>
+        <div className={`select-text text-gray-600 text-sm break-all whitespace-pre-wrap dark:text-white`}>
           {renderContent({
             content_type,
             content,
@@ -39,7 +36,7 @@ const PreviewMessage: FC<Props> = ({ mid = 0, context }) => {
           })}
         </div>
       </div>
-    </StyledWrapper>
+    </div>
   );
 };