update: setup layouts and basic ui

src/components/window/Card.tsx

@@ -0,0 +1,42 @@
+import { ReactNode } from "react";
+
+interface CardProps {
+  children: ReactNode;
+}
+
+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%]"
+      data-tauri-drag-region
+    >
+      {children}
+    </div>
+  );
+};
+
+const CardHeader = ({ children }: CardProps) => {
+  return (
+    <div className="flex items-center gap-2.5 tracking-wide">{children}</div>
+  );
+};
+
+const CardIcon = ({ children }: CardProps) => {
+  return (
+    <div className="flex gap-1.5 items-center font-semibold">{children}</div>
+  );
+};
+
+const CardTool = ({ children }: CardProps) => {
+  return (
+    <div className="flex items-center justify-end flex-grow gap-2">
+      {children}
+    </div>
+  );
+};
+
+const CardBody = ({ children }: CardProps) => {
+  return <div className="text-sm tracking-wide text-zinc-800">{children}</div>;
+};
+
+export { Card, CardHeader, CardIcon, CardTool, CardBody };