feat: view/edit existing recipe in Desktop (#2670)

2025-05-28 14:19:48 +10:00
parent f080a41387
commit 4947591ac8
11 changed files with 461 additions and 324 deletions
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+
+export default function RecipeActivityEditor({
+  activities,
+  setActivities,
+}: {
+  activities: string[];
+  setActivities: (prev: string[]) => void;
+}) {
+  const [newActivity, setNewActivity] = useState('');
+  const handleAddActivity = () => {
+    if (newActivity.trim()) {
+      setActivities([...activities, newActivity.trim()]);
+      setNewActivity('');
+    }
+  };
+
+  const handleRemoveActivity = (activity: string) => {
+    setActivities(activities.filter((a) => a !== activity));
+  };
+  return (
+    <div>
+      <label htmlFor="activities" className="block text-md text-textProminent mb-2 font-bold">
+        Activities
+      </label>
+      <p className="text-textSubtle space-y-2 pb-2">
+        The top-line prompts and activities that will display within your goose home page.
+      </p>
+      <div className="space-y-4">
+        <div className="flex flex-wrap gap-3">
+          {activities.map((activity, index) => (
+            <div
+              key={index}
+              className="inline-flex items-center bg-bgApp border-2 border-borderSubtle rounded-full px-4 py-2 text-sm text-textStandard"
+              title={activity.length > 100 ? activity : undefined}
+            >
+              <span>{activity.length > 100 ? activity.slice(0, 100) + '...' : activity}</span>
+              <button
+                onClick={() => handleRemoveActivity(activity)}
+                className="ml-2 text-textStandard hover:text-textSubtle transition-colors"
+              >
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+        <div className="flex gap-3 mt-6">
+          <input
+            type="text"
+            value={newActivity}
+            onChange={(e) => setNewActivity(e.target.value)}
+            onKeyPress={(e) => e.key === 'Enter' && handleAddActivity()}
+            className="flex-1 px-4 py-3 border rounded-lg bg-bgApp text-textStandard placeholder-textPlaceholder focus:outline-none focus:ring-2 focus:ring-borderProminent"
+            placeholder="Add new activity..."
+          />
+          <button
+            onClick={handleAddActivity}
+            className="px-5 py-1.5 text-sm bg-bgAppInverse text-textProminentInverse rounded-xl hover:bg-bgStandardInverse transition-colors"
+          >
+            Add activity
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}