52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
import { Heading } from '@/components/ui/elements/Heading';
|
|
import { ToggleCardSkeleton } from '@/components/ui/elements/ToggleCard';
|
|
import { useCurrent } from '@/hooks/useCurrent';
|
|
|
|
import { CreateIngressForm } from './forms/CreateIngressForm';
|
|
import { StreamKey } from './forms/StreamKey';
|
|
import { StreamURL } from './forms/StreamURL';
|
|
import { InstructionModal } from './InstructionModal';
|
|
|
|
export const KeysSettings = () => {
|
|
const t = useTranslations('dashboard.keys.header');
|
|
|
|
const { user, isLoadingProfile } = useCurrent();
|
|
|
|
return (
|
|
<div className="lg:px-10">
|
|
<div className="block items-center justify-between space-y-3 lg:flex lg:space-y-0">
|
|
<Heading
|
|
description={t('description')}
|
|
size="lg"
|
|
title={t('heading')}
|
|
/>
|
|
|
|
<div className="flex items-center gap-x-4">
|
|
<InstructionModal />
|
|
|
|
<CreateIngressForm />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 space-y-6">
|
|
{isLoadingProfile
|
|
? Array.from({ length: 2 }).map((_, index) => (
|
|
// eslint-disable-next-line react/no-array-index-key
|
|
<ToggleCardSkeleton key={index} />
|
|
))
|
|
: (
|
|
<>
|
|
<StreamURL value={user?.stream?.serverUrl} />
|
|
|
|
<StreamKey value={user?.stream?.key} />
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|