quietlight/skraak.app - Change LZ5WUFZEEX5SE5CQLIX5A737XTCTR73ZIX56XY3J63CWPSYZBW6AC

finished work on the species tab now I think, call type is now editable

Created by AEj8dahVWy718uSSFPe9VSRJ5qX5G8pC2zvFzJJ8yzBd on May 25, 2025

LZ5WUFZEEX5SE5CQLIX5A737XTCTR73ZIX56XY3J63CWPSYZBW6AC

Dependencies

In channels

main

Change contents

Insertion in src/components/Species.tsx at line 141 [3.1]

[2.23243]

            callTypes: callTypes.filter(ct => ct.label.trim()).map(ct => ({ label: ct.label })),

Replacement in src/components/Species.tsx at line 557 [3.1]

B:BD[2.36481] → [2.36481:36716]

              {!isEditMode && (
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <h4 className="font-medium text-gray-900">Call Types (Optional)</h4>

[2.36481]

[2.36716]

              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <h4 className="font-medium text-gray-900">Call Types (Optional)</h4>
                  <Button
                    type="button"
                    onClick={addCallType}
                    variant="outline"
                    size="sm"
                    className="flex items-center gap-1"
                  >
                    <Plus className="h-3 w-3" />
                    Add Call Type
                  </Button>
                </div>
                <p className="text-sm text-gray-600">Examples: male, female, duet, trill, hunting, begging</p>
                
                {callTypes.map((callType, index) => (
                  <div key={callType.id} className="flex gap-2">
                    <input
                      type="text"
                      value={callType.label}
                      onChange={(e) => updateCallType(index, e.target.value)}
                      className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                      placeholder="Call type label"
                      maxLength={100}
                    />

Replacement in src/components/Species.tsx at line 585 [3.1]

B:BD[2.36780] → [2.36780:36864]

                      onClick={addCallType}
                      variant="outline"

[2.36780]

[2.36864]

                      onClick={() => removeCallType(index)}
                      variant="ghost"

Replacement in src/components/Species.tsx at line 588 [3.1]

B:BD[2.36896] → [2.36896:36954]

                      className="flex items-center gap-1"

[2.36896]

[2.36954]

                      className="p-2 text-red-600 hover:bg-red-50"

Replacement in src/components/Species.tsx at line 590 [3.1]

B:BD[2.36976] → [2.36976:37063]

                      <Plus className="h-3 w-3" />
                      Add Call Type

[2.36976]

[2.37063]

                      <Trash2 className="h-4 w-4" />

Replacement in src/components/Species.tsx at line 593 [3.1]

B:BD[2.37118] → [2.37118:38321]

                  <p className="text-sm text-gray-600">Examples: male, female, duet, trill, hunting, begging</p>
                  
                  {callTypes.map((callType, index) => (
                    <div key={callType.id} className="flex gap-2">
                      <input
                        type="text"
                        value={callType.label}
                        onChange={(e) => updateCallType(index, e.target.value)}
                        className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="Call type label"
                        maxLength={100}
                      />
                      <Button
                        type="button"
                        onClick={() => removeCallType(index)}
                        variant="ghost"
                        size="sm"
                        className="p-2 text-red-600 hover:bg-red-50"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              )}

[2.37118]

[2.38321]

                ))}
              </div>