From 4c6c668a3ee9630c5077096eb678e83c4a63ac79 Mon Sep 17 00:00:00 2001
From: Kagura <me@kagurach.uk>
Date: Thu, 21 Nov 2024 22:08:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90TODO=20List?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/TodoList.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/TodoList.tsx b/src/TodoList.tsx
index 41cc039..9e4df93 100644
--- a/src/TodoList.tsx
+++ b/src/TodoList.tsx
@@ -16,6 +16,14 @@ function TodoItems({ items, setItems }: {
   items: todoItem[],
   setItems: React.Dispatch<React.SetStateAction<todoItem[]>> 
 }) {
+  if (items.length == 0){ // 空
+    return (
+    <div className="text-center text-xl space-y-2 text-teal-800">
+    <p>暂时没有TODO项目</p>
+    <p>从下面添加新的 TODO↓</p>
+    </div>
+  )}
+
   return (
     <>
       <ul className="space-y-4">
@@ -111,7 +119,7 @@ const TodoList = () => {
 
   return (
     <div className="min-h-screen flex flex-col items-center justify-center bg-slate-50 p-2 sm:p-4">
-      <p className="text-2xl sm:text-4xl text-center p-5 sm:p-20 bg-gradient-to-r from-blue-800 to-pink-800 via-green-950 inline-block text-transparent bg-clip-text">简单TODO</p>
+      <p className="text-2xl sm:text-4xl text-center p-5 sm:p-20 bg-gradient-to-r from-blue-600 to-pink-600 via-green-700 inline-block text-transparent bg-clip-text">简单TODO</p>
       <div className="w-full sm:max-w-3xl p-5 sm:p-10 bg-white rounded-lg shadow-lg">
         <TodoItems items={items} setItems={setItems} />
       </div>