update: setup home page ui

src/components/window/Card.tsx

@@ -1,13 +1,14 @@
 import { ReactNode } from "react";
 
 interface CardProps {
-  children: ReactNode;
+  children?: ReactNode;
+  className?: string;
 }
 
 const Card = ({ children }: CardProps) => {
   return (
     <div
-      className="dark:from-black/10 dark:to-black/5 dark:border-white/[6%] px-4 pt-3 pb-4 flex flex-col gap-2 border rounded-lg bg-gradient-to-br from-white/90 to-white/80 border-black/[6%]"
+      className="dark:from-black/10 dark:to-black/5 dark:border-white/[6%] px-4 pt-3 pb-4 flex flex-col gap-2 border w-full rounded-lg bg-gradient-to-br from-white/90 to-white/80 border-black/[6%]"
       data-tauri-drag-region
     >
       {children}
@@ -36,7 +37,7 @@ const CardTool = ({ children }: CardProps) => {
 };
 
 const CardBody = ({ children }: CardProps) => {
-  return <div className="text-sm tracking-wide text-zinc-800">{children}</div>;
+  return <div className="w-full h-full text-sm tracking-wide text-zinc-800">{children}</div>;
 };
 
 export { Card, CardHeader, CardIcon, CardTool, CardBody };

src/components/window/Header.tsx

@@ -5,7 +5,7 @@ const Header = () => {
         Faze.Rop紫本人
       </h1>
       <p className="text-sm font-light tracking-wide text-zinc-400 w-fit">
-        本周使用CSGO工具箱 62小时
+        本周使用CS工具箱 114 小时
       </p>
     </div>
   );

src/components/window/ToolButton.tsx

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+
+interface ToolButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode;
+}
+export const ToolButton = ({ children, ...rest }: ToolButtonProps) => {
+  return <button className="flex gap-0.5 active:scale-95 items-center min-w-7 justify-center px-2 py-1.5 bg-black/5 transition hover:bg-black/10 rounded-md text-sm leading-none" {...rest}>{children}</button>;
+};