[feat] setup supabase + notice and cfgx fetching

src/components/cstb/Notice.tsx

@@ -1,3 +1,4 @@
+"use client"
 import {
   Card,
   CardBody,
@@ -6,13 +7,15 @@ import {
   CardTool,
 } from "@/components/window/Card"
 import { appStore } from "@/store/app"
+import { createClient } from "@/utils/supabase/client"
+import { Skeleton } from "@heroui/react"
 import { Refresh, VolumeNotice } from "@icon-park/react"
+import useSWR, { useSWRConfig } from "swr"
 import { useSnapshot } from "valtio"
 import { ToolButton } from "../window/ToolButton"
 
 const Notice = () => {
-  void appStore.start()
-  const app = useSnapshot(appStore.state)
+  const { mutate } = useSWRConfig()
 
   return (
     <Card>
@@ -21,17 +24,54 @@ const Notice = () => {
           <VolumeNotice /> 公告
         </CardIcon>
         <CardTool>
-          <ToolButton>
+          <ToolButton onClick={() => mutate("/api/notice")}>
             <Refresh />
             刷新
           </ToolButton>
         </CardTool>
       </CardHeader>
       <CardBody>
-        {app.notice || "不会真的有人要更新CSGO工具箱吧，不会吧不会吧 xswl"}
+        <NoticeBody />
       </CardBody>
     </Card>
   )
 }
 
+const NoticeBody = () => {
+  void appStore.start()
+  const app = useSnapshot(appStore.state)
+
+  const noticeFetcher = async () => {
+    const supabase = createClient()
+    const { data /* , error */ } = await supabase
+      .from("Notice")
+      .select("created_at, content, url")
+      .order("created_at", { ascending: false })
+      .single()
+
+    return data
+  }
+
+  const { data: notice /* , error */, isLoading } = useSWR(
+    "/api/notice",
+    noticeFetcher,
+  )
+
+  // if (error) return <>错误：{error}</>
+  if (isLoading)
+    return (
+      <Skeleton className="rounded-lg">
+        <div className="h-6" />
+      </Skeleton>
+    )
+
+  return (
+    <>
+      {notice?.content ||
+        app.notice ||
+        "不会真的有人要更新CSGO工具箱吧，不会吧不会吧 xswl"}
+    </>
+  )
+}
+
 export default Notice

src/components/window/Card.tsx

@@ -11,7 +11,7 @@ interface CardProps {
 const Card = ({ children }: CardProps) => {
   return (
     <div
-      className="dark:bg-white/[3%] dark:border-white/[6%] px-3 pt-3 pb-4 flex flex-col gap-2.5 border w-full rounded-lg bg-white/40 border-black/[6%]"
+      className="dark:bg-white/[3%] dark:border-white/[6%] px-3 py-3 flex flex-col gap-2.5 border w-full rounded-lg bg-white/40 border-black/[6%]"
       data-tauri-drag-region
     >
       {children}