From c739a66bcfca4398ba47ececb1c35448854f5faa Mon Sep 17 00:00:00 2001
From: sosohime <supersosohime@gmail.com>
Date: Mon, 27 Jan 2025 14:00:16 +0800
Subject: [PATCH] feat: reck ssr

---
 .../src/components/tuixiu/reckful.tsx             | 15 +++++++++++----
 apps/frontend-astro/src/pages/reckful.astro       |  7 ++++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/apps/frontend-astro/src/components/tuixiu/reckful.tsx b/apps/frontend-astro/src/components/tuixiu/reckful.tsx
index 3b00166..bd1ad80 100644
--- a/apps/frontend-astro/src/components/tuixiu/reckful.tsx
+++ b/apps/frontend-astro/src/components/tuixiu/reckful.tsx
@@ -1,18 +1,23 @@
 import React from 'react';
 import { useTuixiuCountDown, getCountDown } from '../../hooks/countDown';
 import { tuixiu } from '@mono/const';
+import type { CountDown } from '../../hooks/countDown';
 import CopyToClipboardButton from '../copyToClipboard';
 import { ArrowUpRight, ArrowRightLeft } from 'lucide-react';
 import { buttonVariants } from '@mono/ui/button';
 
 const { reckfulTuiXiuDay, reckfulChangQiFuWu } = tuixiu;
 
-export default function Tuixiu() {
+export default function Tuixiu({
+  initCountDown,
+}: {
+  initCountDown: CountDown;
+}) {
   const countDown = useTuixiuCountDown(reckfulTuiXiuDay);
   const changQiFuWuCountDown = useTuixiuCountDown(reckfulChangQiFuWu);
 
   const getTuiClipboardText = React.useCallback(() => {
-    const tui = getCountDown(reckfulTuiXiuDay);
+    const tui = getCountDown(reckfulTuiXiuDay || initCountDown);
     return `你李进爷爷还有 ${tui['yyyyMMDD hhmmss']} 就退休了！`;
   }, []);
 
@@ -20,8 +25,10 @@ export default function Tuixiu() {
     <div className="text-center h-full w-full flex flex-col justify-center items-center">
       <h1 className="text-2xl pb-4">距离Reckful退休还有</h1>
       <p className="text-4xl pb-4">
-        {countDown?.['yyyyMMDD hhmmss']}
-        <span className="text-xl pl-1">{countDown?.milliseconds}</span>
+        {(countDown || initCountDown)['yyyyMMDD hhmmss']}
+        <span className="text-xl pl-1">
+          {(countDown || initCountDown).milliseconds}
+        </span>
       </p>
 
       <p className="pb-4">
diff --git a/apps/frontend-astro/src/pages/reckful.astro b/apps/frontend-astro/src/pages/reckful.astro
index 3954204..213b225 100644
--- a/apps/frontend-astro/src/pages/reckful.astro
+++ b/apps/frontend-astro/src/pages/reckful.astro
@@ -5,8 +5,13 @@ import Tuixiu from '../components/tuixiu/reckful'
 
 // Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
 // Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
+import { tuixiu } from '@mono/const';
+import { getCountDown } from '../hooks/countDown'
+const { reckfulTuiXiuDay } = tuixiu
+
+const initCountDown = getCountDown(reckfulTuiXiuDay)
 ---
 
 <Layout  title="Reckful退休倒计时">
-	<Tuixiu client:load />
+	<Tuixiu client:load initCountDown={initCountDown} />
 </Layout>