完成TODO List

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>