優起來

開始做才知道，原來畫面可以更好更直覺，所以我把meme改成下面這樣的畫面。

更改內容

• 按鈕移到下方
• 加了一些箭頭
• 把input框包出來

包出來的input component長這樣

import React from 'react';
import '@fortawesome/fontawesome-free/css/all.min.css';

function NumberInput({ min, max, value, onChange }) {
  const handleIncrement = () => {
    if (value < max) {
      onChange(value + 1);
    }
  };

  const handleDecrement = () => {
    if (value > min) {
      onChange(value - 1);
    }
  };

  const handleInputChange = (e) => {
    const newValue = parseInt(e.target.innerText, 10);
    if (!isNaN(newValue) && newValue >= min && newValue <= max) {
      onChange(newValue);
    } else if (e.target.innerText === '' || newValue === 0) {
      // 如果輸入為空或0，不更新數值
      e.target.innerText = '';
    } else {
      // 恢復原值
      e.target.innerText = value;
    }
  };

  return (
    <div className="flex items-center">
      <button
        onClick={handleDecrement}
        className="px-2 py-1 bg-gray-300 text-gray-700 rounded-l-md hover:bg-gray-400 transition-colors"
        disabled={value <= min}
      >
        <i className="fas fa-chevron-down"></i>
      </button>
      <div
        className="mx-2 p-2 border-t border-b border-gray-300 text-center w-16"
        contentEditable
        suppressContentEditableWarning
        onInput={handleInputChange}
      >
        {value}
      </div>
      <button
        onClick={handleIncrement}
        className="px-2 py-1 bg-gray-300 text-gray-700 rounded-r-md hover:bg-gray-400 transition-colors"
        disabled={value >= max}
      >
        <i className="fas fa-chevron-up"></i>
      </button>
    </div>
  );
}

export default NumberInput;

其實也不用想太多

也是都叫copilot幫我做的，只要下對指令就好，或著說下對自己要的指令，舉例幾個我今天給的Prompt：

• 請優化input的上下箭頭，我想要另外用一個component來做，這樣比較可以修改上下箭頭的樣式，請教我怎麼做並給我程式碼
• 現在這個畫面看起來有點不直覺，請幫我優化程式碼，讓畫面更直覺好看
• 現在畫面是+跟-，我想要是上下的箭頭，而且要好看

總之把LLM當工具人就好，自己就是一個很會使喚工具人的人
　　這邊我要各位想想看，求學、生活、職場中，有沒有那種把你當工具人的女人/男人，要你去幫他修電腦、跑腿買宵夜、做功課...，或是你有伴侶，但家裡的打掃事務都是你在做，晚餐還要幫忙想、下班也要去接送，乾!
　　不管你有多苦，現在我們有了LLM這種工具，我們也可以體會"使喚工具人"的這種爽感，這種想法就對了，一直使用一直爽，也不用怕自己不會，想想看現在有多少個類似ChatGpt的產品，就有多少個工具人給你使用，根本不用怕，不會背後的邏輯也行，但要成為"會叫工具人做事的人"。
　　講到這邊，大家一定也知道我要說什麼了，對！我要去打荒野了，今天實在是很累，明天開始四連休，要好好休息囉，爽。但我的鐵人文會繼續，祝各位假期愉快。

工具或網站推薦

好啦今天其實有點不負責任，我這邊還是推薦幾個我覺得還不錯的網站或工具。

1. 在咖啡廳轉生成為冰美這個podcast超讚，快去聽！去聽就對了！
2. AI設計工具門TDRI(台灣設計研究院)推薦的AI設計工具站。
3. toolify我在我書籤發現的，會推薦一些熱門的AI工具。
4. 街聲聽團仔請往這邊走。

好啦，今天大概就這樣，88~