chore: use grid layouts all

src/components/AppContainer/index.tsx

@@ -6,7 +6,7 @@ export interface AppContainerProps {
 
 const AppContainer: FC<AppContainerProps> = ({ children }) => {
   return (
-    <div className="fixed bottom-10 right-10 top-10 z-top box-border grid w-1/4 grid-flow-col grid-rows-[auto_1fr_auto] overflow-hidden  rounded-xl bg-slate-50 shadow-2xl transition-transform">
+    <div className="fixed bottom-10 right-10 top-10 z-top box-border grid w-1/4 grid-flow-col grid-rows-[auto_1fr_auto] overflow-hidden rounded-xl  bg-slate-50 font-sans shadow-2xl transition-transform">
       {children}
     </div>
   )

src/components/Footer/index.tsx

@@ -13,24 +13,28 @@ const Footer: FC = () => {
   }
 
   return (
-    <div className="grid grid-cols-2 gap-y-2  p-4">
+    <div className="grid gap-y-2 p-4">
       <Textarea
-        className="col-span-2 rounded-lg bg-gray-50"
+        className="rounded-lg bg-gray-50"
         rows={is2XL ? 3 : 2}
         value={message}
         placeholder="Type your message here."
         onInput={handleInput}
       />
-
-      <Button variant="ghost" size="icon" className="place-self-start">
+      <div className="grid grid-cols-[auto_auto_1fr] items-center justify-items-end">
+        <Button variant="ghost" size="icon">
           <SmileIcon size={20} />
         </Button>
-      <Button size="sm" className="place-self-end">
+        <Button variant="ghost" size="icon">
+          <SmileIcon size={20} />
+        </Button>
+        <Button size="sm">
           <span className="mr-2">Send</span>
           <CommandIcon className="text-slate-400" size={12}></CommandIcon>
           <CornerDownLeftIcon className="text-slate-400" size={12}></CornerDownLeftIcon>
         </Button>
       </div>
+    </div>
   )
 }
 

src/components/Header/index.tsx

@@ -7,7 +7,7 @@ const Header: FC = () => {
   const websiteInfo = getWebSiteInfo()
 
   return (
-    <div className="shadow-xs flex  h-12 items-center bg-white px-4 2xl:h-14">
+    <div className="shadow-xs grid h-12 grid-cols-[auto_1fr_auto] items-center bg-white px-4 backdrop-blur-lg 2xl:h-14">
       <img className="h-8 w-8 overflow-hidden rounded-full" src={websiteInfo.icon} />
       <HoverCard>
         <HoverCardTrigger asChild>
@@ -16,16 +16,16 @@ const Header: FC = () => {
           </Button>
         </HoverCardTrigger>
         <HoverCardContent className="w-80">
-          <div className="flex justify-between space-x-4">
-            <img className="h-14 w-14 flex-shrink-0 overflow-hidden rounded-full" src={websiteInfo.icon} />
-            <div className="space-y-1">
+          <div className="grid grid-cols-[auto_1fr] gap-x-4">
+            <img className="h-14 w-14 overflow-hidden rounded-full" src={websiteInfo.icon} />
+            <div className="grid">
               <h4 className="text-sm font-semibold">{websiteInfo.title}</h4>
               <p className="text-xs text-slate-500">{websiteInfo.description}</p>
             </div>
           </div>
         </HoverCardContent>
       </HoverCard>
-      <div className="ml-auto flex-shrink-0 text-sm text-slate-500">Online 99</div>
+      <div className="text-sm text-slate-500">Online 99</div>
     </div>
   )
 }

src/components/Main/LikeButton.tsx

@@ -29,13 +29,14 @@ const LikeButton: FC<LikeButtonProps> = ({ type, checked, count, onClick, onChan
       onClick={handleOnClick}
       variant="secondary"
       className={cn(
-        'flex items-center gap-x-1 rounded-full transition-all ',
-        checked ? 'text-orange-500' : 'text-slate-500'
+        'grid items-center overflow-hidden rounded-full leading-none transition-all',
+        checked ? 'text-orange-500' : 'text-slate-500',
+        count ? 'grid-cols-[auto_1fr] gap-x-1' : 'grid-cols-[auto_0fr] gap-x-0'
       )}
       size="xs"
     >
       <Icon size={14} />
-      {!!count && <span className="text-xs">{count}</span>}
+      {!!count && <span className="min-w-0 text-xs">{count}</span>}
     </Button>
   )
 }

src/components/Main/Message.tsx

@@ -34,13 +34,13 @@ const Message: FC<MessageProps> = ({ data }) => {
   }
 
   return (
-    <div className="flex w-full gap-x-2">
+    <div className="grid grid-cols-[auto_1fr] gap-x-2">
       <Avatar>
         <AvatarImage src={formatData.avatar} />
         <AvatarFallback>{formatData.username}</AvatarFallback>
       </Avatar>
-      <div className="flex-1">
-        <div className="flex items-baseline gap-x-2 leading-none">
+      <div className="grid">
+        <div className="grid grid-cols-[auto_1fr] items-baseline gap-x-2 leading-none">
           <div className="text-sm font-medium text-slate-600">{formatData.username}</div>
           <div className="text-xs text-slate-400">{formatData.date}</div>
         </div>
@@ -48,7 +48,7 @@ const Message: FC<MessageProps> = ({ data }) => {
           <div className="pb-2">
             <pre className="text-sm">{formatData.body}</pre>
           </div>
-          <div className="flex justify-end gap-x-2 leading-none">
+          <div className="grid grid-flow-col justify-end gap-x-2 leading-none">
             <LikeButton
               type="like"
               checked={formatData.likeChecked}

src/components/Main/index.tsx

@@ -26,19 +26,19 @@ const Main: FC = () => {
       hateCount: 0
     },
     {
-      id: '1',
+      id: '3',
       body: 'Do you like XJP?',
       username: 'molvqingtai',
       avatar: 'https://github.com/shadcn.png',
       date: Date.now(),
       likeChecked: false,
       hateChecked: false,
-      likeCount: 98,
+      likeCount: 9999,
       hateCount: 2
     }
   ]
   return (
-    <div className="flex flex-col gap-y-4 p-4">
+    <div className="grid content-start p-4">
       {messages.map((message) => (
         <Message key={message.id} data={message} />
       ))}