122 lines
4.2 KiB
TypeScript
122 lines
4.2 KiB
TypeScript
import { useSpaceJoin } from '../../hooks/useSpaceJoin';
|
|
import { getSpaceGradient } from '../../utils/gradients';
|
|
import type { TaggedExploreSpace } from '../../stores/exploreStore';
|
|
|
|
export function ExploreSpacePreviewCard({
|
|
space,
|
|
onJoinSuccess,
|
|
}: {
|
|
space: TaggedExploreSpace;
|
|
onJoinSuccess: (spaceId: string) => void;
|
|
}) {
|
|
const {
|
|
isPublic,
|
|
isPending,
|
|
joining,
|
|
joinError,
|
|
showRequestForm,
|
|
requestMessage,
|
|
setRequestMessage,
|
|
openRequestForm,
|
|
cancelRequestForm,
|
|
join,
|
|
sendRequest,
|
|
} = useSpaceJoin(space);
|
|
|
|
const fallbackGradient = getSpaceGradient(space.id, space.name, space.avatarColor).gradient;
|
|
const iconUrl = space.icon
|
|
? (space.icon.startsWith('http') || space.icon.startsWith('/') ? space.icon : `/api/uploads/${space.icon}`)
|
|
: null;
|
|
const originLabel = space._instanceOrigin
|
|
? (() => { try { return new URL(space._instanceOrigin).host; } catch { return space._instanceOrigin; } })()
|
|
: null;
|
|
|
|
const handleJoin = async () => {
|
|
const full = await join();
|
|
if (full) onJoinSuccess(full.id);
|
|
};
|
|
|
|
return (
|
|
<div className="rounded-lg bg-surface-channel border border-border-soft hover:border-border-hard transition-colors px-3 py-2.5">
|
|
<div className="flex items-center gap-3">
|
|
{/* Icon */}
|
|
{iconUrl ? (
|
|
<img src={iconUrl} alt={space.name} className="w-10 h-10 rounded-lg object-cover flex-shrink-0" />
|
|
) : (
|
|
<div
|
|
className="w-10 h-10 rounded-lg flex-shrink-0 flex items-center justify-center text-sm font-bold text-white/90"
|
|
style={{ background: fallbackGradient }}
|
|
>
|
|
{space.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
|
|
{/* Name + meta */}
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-sm font-semibold text-txt-primary truncate">{space.name}</div>
|
|
<div className="flex items-center gap-2 text-[12px] text-txt-tertiary">
|
|
<span>{space.memberCount} {space.memberCount === 1 ? 'member' : 'members'}</span>
|
|
{originLabel && <span className="truncate text-txt-tertiary/70">· {originLabel}</span>}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action */}
|
|
<div className="flex-shrink-0">
|
|
{isPublic ? (
|
|
<button
|
|
type="button"
|
|
onClick={handleJoin}
|
|
disabled={joining}
|
|
className="px-3 py-1.5 bg-accent-primary hover:bg-accent-primary-hover text-white text-xs font-medium rounded-full transition-colors disabled:opacity-50"
|
|
>
|
|
{joining ? 'Joining…' : 'Join'}
|
|
</button>
|
|
) : isPending ? (
|
|
<span className="px-3 py-1.5 text-xs font-medium text-txt-tertiary">Pending</span>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
onClick={openRequestForm}
|
|
className="px-3 py-1.5 bg-accent-amber/20 hover:bg-accent-amber/30 text-accent-amber text-xs font-medium rounded-full transition-colors"
|
|
>
|
|
Request
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Inline request form */}
|
|
{showRequestForm && (
|
|
<div className="mt-2.5 space-y-2">
|
|
<textarea
|
|
value={requestMessage}
|
|
onChange={(e) => setRequestMessage(e.target.value.slice(0, 200))}
|
|
placeholder="Why do you want to join? (optional)"
|
|
rows={2}
|
|
className="input-standard w-full resize-none text-sm"
|
|
/>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={sendRequest}
|
|
disabled={joining}
|
|
className="flex-1 py-1.5 bg-accent-amber hover:bg-accent-amber/80 text-[#13131a] text-xs font-medium rounded transition-colors disabled:opacity-50"
|
|
>
|
|
{joining ? 'Sending…' : 'Send Request'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={cancelRequestForm}
|
|
className="px-3 py-1.5 text-xs text-txt-tertiary hover:text-txt-secondary transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{joinError && <div className="mt-2 text-[12px] text-txt-danger">{joinError}</div>}
|
|
</div>
|
|
);
|
|
}
|