added tons of features

components/cabinet/index.tsx

@@ -0,0 +1,60 @@
+import {useTranslations} from 'next-intl'
+
+import {SignOutButton} from '@/components/auth/forms/sign-out-button'
+import CabinetButton from '@/components/shared/header/cabinet-button'
+import {type SingedInSession} from '@/lib/permission'
+import {dump} from '@/lib/utils'
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger
+} from '@/ui/collapsible'
+import {Separator} from '@/ui/separator'
+
+export default function CabinetIndex({
+	slug,
+	session
+}: {
+	slug: string[] | undefined
+	session: SingedInSession | null
+}) {
+	const t = useTranslations('cabinet')
+
+	return (
+		<div className='my-8'>
+			<div className='container flex flex-col sm:flex-row'>
+				<section className='bw-layout-col-left bw-border-color border-r pt-3'>
+					<div className='flex items-center justify-between pr-4'>
+						<CabinetButton />
+						<div>
+							<p className='text-sm'>{session?.user?.name}</p>
+							<p className='text-xs'>{session?.user?.email}</p>
+						</div>
+					</div>
+					<Separator className='bw-separator-color my-4' />
+					<SignOutButton />
+				</section>
+				<div className='bw-layout-col-right pt-3'>
+					<section className='w-full'>
+						<h1 className='text-3xl font-extrabold'>
+							{t('personal-information.title')}
+						</h1>
+						<Separator className='my-4' />
+						{/*<BasicEditor placeholder={'type something'} />*/}
+						{/*<Separator className='my-4' />*/}
+						{slug ? <code>{slug[0]}</code> : <pre>{dump(session)}</pre>}
+						<Collapsible>
+							<CollapsibleTrigger>
+								Can I use this in my project?
+							</CollapsibleTrigger>
+							<CollapsibleContent>
+								Yes. Free to use for personal and commercial projects. No
+								attribution required.
+							</CollapsibleContent>
+						</Collapsible>
+					</section>
+				</div>
+			</div>
+		</div>
+	)
+}