SkateSpots/src/pages/EditCrewPage.tsx
SkateSpots 0b796440f1 feat(i18n): Spanish batch 2 — nav/chrome, events/shops/tours, crews/DMs, settings/auth, wallet/stash/newsletter/stats
~3,470 new keys (5,770 total, EN=ES), ~115 more files wired.
- nav + chromeUi: header, More menu, burger menu, footer, map toolbar widgets
  (sort/trust/weather), spot-type label helper.
- placesUi: events, shops, tours, food. socialUi: crews, DMs, notifications,
  collectives, crew chat/coordinator. settingsUi: settings, auth/signup,
  onboarding, profile edit, legal. walletUi: wallet/Cashu, stash, mints,
  app shop, newsletter, community stats, leaderboards, profile.
- Fixed 738 usages where an agent dropped the socialUi. prefix (caught by check:i18n).
2026-10-02 10:11:06 +07:00

86 lines
3 KiB
TypeScript

import { useSeoMeta } from '@unhead/react';
import { Link, useParams } from 'react-router-dom';
import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import { LoginArea } from '@/components/auth/LoginArea';
import { CrewForm } from '@/components/CrewForm';
import { useTranslation } from '@/contexts/language';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useCrew } from '@/hooks/useCrews';
import NotFound from './NotFound';
import { Users, ArrowLeft } from 'lucide-react';
export default function EditCrewPage() {
const { t } = useTranslation();
const { pubkey, identifier } = useParams<{ pubkey: string; identifier: string }>();
const { user } = useCurrentUser();
const { data: crew, isLoading } = useCrew(identifier || '', pubkey);
useSeoMeta({
title: crew ? t('socialUi.editCrew.seoTitleNamed', { name: crew.name }) : t('socialUi.editCrew.seoTitle'),
description: t('socialUi.editCrew.seoDescription'),
});
if (!user) {
return (
<>
<div className="container px-4 py-8">
<Card className="max-w-xl mx-auto bg-gray-900 border-gray-700">
<CardContent className="py-12 text-center">
<Users className="h-12 w-12 mx-auto mb-4 text-gray-600" />
<h2 className="text-xl font-bold mb-2">{t('socialUi.editCrew.loginRequired')}</h2>
<LoginArea className="justify-center max-w-60 mx-auto" />
</CardContent>
</Card>
</div>
</>
);
}
if (isLoading) {
return (
<>
<div className="container px-4 py-8 max-w-2xl">
<Skeleton className="h-6 w-32 mb-6" />
<Skeleton className="h-[600px] w-full" />
</div>
</>
);
}
if (!crew) return <NotFound />;
// Only the crew's founder can edit it
if (crew.pubkey !== user.pubkey) {
return (
<>
<div className="container px-4 py-8">
<Card className="max-w-xl mx-auto bg-gray-900 border-gray-700">
<CardContent className="py-12 text-center">
<Users className="h-12 w-12 mx-auto mb-4 text-gray-600" />
<h2 className="text-xl font-bold mb-2">{t('socialUi.editCrew.notYours')}</h2>
<p className="text-gray-400">{t('socialUi.editCrew.notYoursDesc')}</p>
</CardContent>
</Card>
</div>
</>
);
}
return (
<>
<div className="container px-4 sm:px-6 py-6 sm:py-8 max-w-2xl">
<div className="mb-6">
<Link to={`/crew/${crew.pubkey}/${crew.identifier}`} className="inline-flex items-center text-gray-400 hover:text-white transition-colors mb-4">
<ArrowLeft className="h-4 w-4 mr-2" />
{t('socialUi.editCrew.backToCrew')}
</Link>
<h1 className="text-3xl font-black uppercase text-teal-400" style={{ fontFamily: 'Impact, "Arial Black", sans-serif' }}>
{t('socialUi.editCrew.title')}
</h1>
</div>
<CrewForm existing={crew} />
</div>
</>
);
}