teal.fm
Your music, beautifully tracked. All yours. (coming soon)
teal.fm
teal-fm
atproto
move nested components :P
authored by
Natalie
and committed by
Natalie B.
6cebe2c4
71ef20ba
+136
-137
apps/amethyst/app/(tabs)/stamp.tsx
+136
-137
apps/amethyst/app/(tabs)/stamp.tsx
···
44
}
45
}
46
47
export default function TabTwoScreen() {
48
const agent = useStore((state) => state.pdsAgent);
49
const [searchFields, setSearchFields] = useState({
···
136
setSelectedTrack(null);
137
};
138
139
-
const SearchResult = ({
140
-
result,
141
-
onSelectTrack,
142
-
isSelected,
143
-
selectedRelease,
144
-
onReleaseSelect,
145
-
}) => {
146
-
const [showReleaseModal, setShowReleaseModal] = useState(false);
147
-
148
-
const currentRelease = selectedRelease || result.releases?.[0];
149
-
150
-
return (
151
-
<TouchableOpacity
152
-
onPress={() => {
153
-
onSelectTrack(
154
-
isSelected
155
-
? null
156
-
: {
157
-
...result,
158
-
selectedRelease: currentRelease, // Pass the selected release with the track
159
-
},
160
-
);
161
-
}}
162
-
className={`p-4 mb-2 rounded-lg ${
163
-
isSelected ? "bg-primary/20" : "bg-secondary/10"
164
-
}`}
165
-
>
166
-
<View className="flex-row justify-between items-center gap-2">
167
-
<Image
168
-
className="w-16 h-16 rounded-lg bg-gray-500/50"
169
-
source={{
170
-
uri: `https://coverartarchive.org/release/${currentRelease?.id}/front-250`,
171
-
}}
172
-
/>
173
-
<View className="flex-1">
174
-
<Text className="font-bold">{result.title}</Text>
175
-
<Text className="text-sm text-gray-600">
176
-
{result["artist-credit"]?.[0]?.artist?.name ?? "Unknown Artist"}
177
-
</Text>
178
-
179
-
{/* Release Selector Button */}
180
-
{result.releases?.length > 0 && (
181
-
<TouchableOpacity
182
-
onPress={() => setShowReleaseModal(true)}
183
-
className="p-1 bg-secondary/10 rounded-lg flex md:flex-row items-start md:gap-1"
184
-
>
185
-
<Text className="text-sm text-gray-500">Release:</Text>
186
-
<Text className="text-sm" numberOfLines={1}>
187
-
{currentRelease?.title}
188
-
{currentRelease?.date ? ` (${currentRelease.date})` : ""}
189
-
{currentRelease?.country
190
-
? ` - ${currentRelease.country}`
191
-
: ""}
192
-
</Text>
193
-
</TouchableOpacity>
194
-
)}
195
-
</View>
196
-
{/* Existing icons */}
197
-
<Link href={`https://musicbrainz.org/recording/${result.id}`}>
198
-
<View className="bg-primary/40 rounded-full p-1">
199
-
<Icon icon={Brain} size={20} />
200
-
</View>
201
-
</Link>
202
-
{isSelected ? (
203
-
<View className="bg-primary rounded-full p-1">
204
-
<Icon icon={Check} size={20} />
205
-
</View>
206
-
) : (
207
-
<View className="border-2 border-secondary rounded-full p-3"></View>
208
-
)}
209
-
</View>
210
-
211
-
{/* Release Selection Modal */}
212
-
<Modal
213
-
visible={showReleaseModal}
214
-
transparent={true}
215
-
animationType="slide"
216
-
onRequestClose={() => setShowReleaseModal(false)}
217
-
>
218
-
<View className="flex-1 justify-end bg-black/50">
219
-
<View className="bg-background rounded-t-3xl">
220
-
<View className="p-4 border-b border-gray-200">
221
-
<Text className="text-lg font-bold text-center">
222
-
Select Release
223
-
</Text>
224
-
<TouchableOpacity
225
-
className="absolute right-4 top-4"
226
-
onPress={() => setShowReleaseModal(false)}
227
-
>
228
-
<Text className="text-primary">Done</Text>
229
-
</TouchableOpacity>
230
-
</View>
231
-
232
-
<ScrollView className="max-h-[50vh]">
233
-
{result.releases?.map((release) => (
234
-
<TouchableOpacity
235
-
key={release.id}
236
-
className={`p-4 border-b border-gray-100 ${
237
-
selectedRelease?.id === release.id ? "bg-primary/10" : ""
238
-
}`}
239
-
onPress={() => {
240
-
onReleaseSelect(result.id, release);
241
-
setShowReleaseModal(false);
242
-
}}
243
-
>
244
-
<Text className="font-medium">{release.title}</Text>
245
-
<View className="flex-row gap-2">
246
-
{release.date && (
247
-
<Text className="text-sm text-gray-500">
248
-
{release.date}
249
-
</Text>
250
-
)}
251
-
{release.country && (
252
-
<Text className="text-sm text-gray-500">
253
-
{release.country}
254
-
</Text>
255
-
)}
256
-
{release.status && (
257
-
<Text className="text-sm text-gray-500">
258
-
{release.status}
259
-
</Text>
260
-
)}
261
-
</View>
262
-
{release.disambiguation && (
263
-
<Text className="text-sm text-gray-400 italic">
264
-
{release.disambiguation}
265
-
</Text>
266
-
)}
267
-
</TouchableOpacity>
268
-
))}
269
-
</ScrollView>
270
-
</View>
271
-
</View>
272
-
</Modal>
273
-
</TouchableOpacity>
274
-
);
275
-
};
276
return (
277
<ScrollView className="flex-1 p-4 bg-background items-center">
278
<Stack.Screen
···
44
}
45
}
46
47
+
const SearchResult = ({
48
+
result,
49
+
onSelectTrack,
50
+
isSelected,
51
+
selectedRelease,
52
+
onReleaseSelect,
53
+
}) => {
54
+
const [showReleaseModal, setShowReleaseModal] = useState(false);
55
+
56
+
const currentRelease = selectedRelease || result.releases?.[0];
57
+
58
+
return (
59
+
<TouchableOpacity
60
+
onPress={() => {
61
+
onSelectTrack(
62
+
isSelected
63
+
? null
64
+
: {
65
+
...result,
66
+
selectedRelease: currentRelease, // Pass the selected release with the track
67
+
},
68
+
);
69
+
}}
70
+
className={`p-4 mb-2 rounded-lg ${
71
+
isSelected ? "bg-primary/20" : "bg-secondary/10"
72
+
}`}
73
+
>
74
+
<View className="flex-row justify-between items-center gap-2">
75
+
<Image
76
+
className="w-16 h-16 rounded-lg bg-gray-500/50"
77
+
source={{
78
+
uri: `https://coverartarchive.org/release/${currentRelease?.id}/front-250`,
79
+
}}
80
+
/>
81
+
<View className="flex-1">
82
+
<Text className="font-bold">{result.title}</Text>
83
+
<Text className="text-sm text-gray-600">
84
+
{result["artist-credit"]?.[0]?.artist?.name ?? "Unknown Artist"}
85
+
</Text>
86
+
87
+
{/* Release Selector Button */}
88
+
{result.releases?.length > 0 && (
89
+
<TouchableOpacity
90
+
onPress={() => setShowReleaseModal(true)}
91
+
className="p-1 bg-secondary/10 rounded-lg flex md:flex-row items-start md:gap-1"
92
+
>
93
+
<Text className="text-sm text-gray-500">Release:</Text>
94
+
<Text className="text-sm" numberOfLines={1}>
95
+
{currentRelease?.title}
96
+
{currentRelease?.date ? ` (${currentRelease.date})` : ""}
97
+
{currentRelease?.country ? ` - ${currentRelease.country}` : ""}
98
+
</Text>
99
+
</TouchableOpacity>
100
+
)}
101
+
</View>
102
+
{/* Existing icons */}
103
+
<Link href={`https://musicbrainz.org/recording/${result.id}`}>
104
+
<View className="bg-primary/40 rounded-full p-1">
105
+
<Icon icon={Brain} size={20} />
106
+
</View>
107
+
</Link>
108
+
{isSelected ? (
109
+
<View className="bg-primary rounded-full p-1">
110
+
<Icon icon={Check} size={20} />
111
+
</View>
112
+
) : (
113
+
<View className="border-2 border-secondary rounded-full p-3"></View>
114
+
)}
115
+
</View>
116
+
117
+
{/* Release Selection Modal */}
118
+
<Modal
119
+
visible={showReleaseModal}
120
+
transparent={true}
121
+
animationType="slide"
122
+
onRequestClose={() => setShowReleaseModal(false)}
123
+
>
124
+
<View className="flex-1 justify-end bg-black/50">
125
+
<View className="bg-background rounded-t-3xl">
126
+
<View className="p-4 border-b border-gray-200">
127
+
<Text className="text-lg font-bold text-center">
128
+
Select Release
129
+
</Text>
130
+
<TouchableOpacity
131
+
className="absolute right-4 top-4"
132
+
onPress={() => setShowReleaseModal(false)}
133
+
>
134
+
<Text className="text-primary">Done</Text>
135
+
</TouchableOpacity>
136
+
</View>
137
+
138
+
<ScrollView className="max-h-[50vh]">
139
+
{result.releases?.map((release) => (
140
+
<TouchableOpacity
141
+
key={release.id}
142
+
className={`p-4 border-b border-gray-100 ${
143
+
selectedRelease?.id === release.id ? "bg-primary/10" : ""
144
+
}`}
145
+
onPress={() => {
146
+
onReleaseSelect(result.id, release);
147
+
setShowReleaseModal(false);
148
+
}}
149
+
>
150
+
<Text className="font-medium">{release.title}</Text>
151
+
<View className="flex-row gap-2">
152
+
{release.date && (
153
+
<Text className="text-sm text-gray-500">
154
+
{release.date}
155
+
</Text>
156
+
)}
157
+
{release.country && (
158
+
<Text className="text-sm text-gray-500">
159
+
{release.country}
160
+
</Text>
161
+
)}
162
+
{release.status && (
163
+
<Text className="text-sm text-gray-500">
164
+
{release.status}
165
+
</Text>
166
+
)}
167
+
</View>
168
+
{release.disambiguation && (
169
+
<Text className="text-sm text-gray-400 italic">
170
+
{release.disambiguation}
171
+
</Text>
172
+
)}
173
+
</TouchableOpacity>
174
+
))}
175
+
</ScrollView>
176
+
</View>
177
+
</View>
178
+
</Modal>
179
+
</TouchableOpacity>
180
+
);
181
+
};
182
+
183
export default function TabTwoScreen() {
184
const agent = useStore((state) => state.pdsAgent);
185
const [searchFields, setSearchFields] = useState({
···
272
setSelectedTrack(null);
273
};
274
275
return (
276
<ScrollView className="flex-1 p-4 bg-background items-center">
277
<Stack.Screen