92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
import { useMemo } from 'react';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Link2, X, GraduationCap } from 'lucide-react';
|
|
import { useLabProfiles } from '@/hooks/useLabProfiles';
|
|
import { useCurrentUser } from '@/hooks/useCurrentUser';
|
|
import { useTranslation } from '@/contexts/language';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface LabLinkFieldProps {
|
|
/** Selected Lab profile coordinates (`kind:pubkey:d`). */
|
|
value: string[];
|
|
onChange: (coords: string[]) => void;
|
|
maxLinks?: number;
|
|
}
|
|
|
|
/**
|
|
* Lets a crew owner link their own Lab profiles (studio/coach/builder listings)
|
|
* so a crew and its service listings cross-reference each other.
|
|
*/
|
|
export function LabLinkField({ value, onChange, maxLinks = 8 }: LabLinkFieldProps) {
|
|
const { user } = useCurrentUser();
|
|
const { t } = useTranslation();
|
|
const { data: allProfiles } = useLabProfiles(200);
|
|
|
|
const typeLabel = (type: string) => {
|
|
const known = ['coach', 'filmer', 'editor', 'photographer', 'builder', 'artist', 'graffiti', 'tattoo', 'trainer', 'musician', 'judge', 'barber', 'organizer', 'transport'];
|
|
return known.includes(type) ? t(`labUi.labLink.${type}`) : t('labUi.labLink.lab');
|
|
};
|
|
|
|
// Only your own Lab profiles — a crew can only vouch a link to listings it controls.
|
|
const myProfiles = useMemo(
|
|
() => (allProfiles ?? []).filter((p) => p.pubkey === user?.pubkey),
|
|
[allProfiles, user?.pubkey]
|
|
);
|
|
|
|
const coordFor = (kind: number, pubkey: string, identifier: string) => `${kind}:${pubkey}:${identifier}`;
|
|
|
|
const toggle = (coord: string) => {
|
|
if (value.includes(coord)) {
|
|
onChange(value.filter((c) => c !== coord));
|
|
} else if (value.length < maxLinks) {
|
|
onChange([...value, coord]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-3 rounded-lg border border-gray-700 bg-gray-900/60 p-4">
|
|
<div>
|
|
<Label className="flex items-center gap-2 text-teal-400">
|
|
<Link2 className="h-4 w-4" /> {t('labUi.labLink.linkedProfiles')}
|
|
</Label>
|
|
<p className="mt-1 text-xs text-gray-500">
|
|
{t('labUi.labLink.desc')}{' '}
|
|
<span className="font-bold text-green-400">{t('common.verified')}</span>{' '}
|
|
{t('labUi.labLink.descEnd')}
|
|
</p>
|
|
</div>
|
|
|
|
{myProfiles.length === 0 ? (
|
|
<p className="text-xs text-gray-500 italic">
|
|
{t('labUi.labLink.empty')}
|
|
</p>
|
|
) : (
|
|
<div className="flex flex-wrap gap-2">
|
|
{myProfiles.map((p) => {
|
|
const coord = coordFor(p.event.kind, p.pubkey, p.identifier);
|
|
const selected = value.includes(coord);
|
|
return (
|
|
<button
|
|
key={coord}
|
|
type="button"
|
|
onClick={() => toggle(coord)}
|
|
disabled={!selected && value.length >= maxLinks}
|
|
className={cn(
|
|
'inline-flex items-center gap-1.5 rounded-xl border px-3 py-2 text-xs font-bold transition-all active:scale-95 disabled:opacity-40',
|
|
selected
|
|
? 'bg-teal-500 border-transparent text-white'
|
|
: 'border-gray-700 bg-gray-800 text-gray-300 hover:bg-gray-700'
|
|
)}
|
|
>
|
|
<GraduationCap className="h-3.5 w-3.5" />
|
|
<span className="truncate max-w-[10rem]">{p.title}</span>
|
|
<span className="opacity-60">· {typeLabel(p.profileType)}</span>
|
|
{selected && <X className="h-3 w-3 opacity-80" />}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|