feat: apply layout

src/components/decks/decks-table.tsx

@@ -44,6 +44,7 @@ type Props = {
   onDeleteClick: (id: string) => void
   onEditClick: (id: string) => void
 }
+
 export const DecksTable = ({ currentUserId, decks, onDeleteClick, onEditClick }: Props) => {
   const handleEditClick = (id: string) => () => onEditClick(id)
   const handleDeleteClick = (id: string) => () => onDeleteClick(id)

src/components/layout/header/user-dropdown/user-dropdown.tsx

@@ -16,13 +16,17 @@ import {
 import s from './user-dropdown.module.scss'
 
 export type UserDropdownProps = {
-  avatar: string
+  avatar: null | string
   email: string
   onLogout: ComponentPropsWithoutRef<typeof DropdownMenuItem>['onSelect']
   userName: string
 }
 
 export const UserDropdown = ({ avatar, email, onLogout, userName }: UserDropdownProps) => {
+  if (!avatar) {
+    avatar = `https://ui-avatars.com/api/?name=${userName.split(' ').join('+')}`
+  }
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>

src/components/layout/layout.stories.tsx

@@ -1,18 +1,18 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Layout } from './'
+import { LayoutPrimitive } from './'
 
 const meta = {
   argTypes: {
     onLogout: { action: 'logout' },
   },
-  component: Layout,
+  component: LayoutPrimitive,
   parameters: {
     layout: 'fullscreen',
   },
   tags: ['autodocs'],
   title: 'Components/Layout',
-} satisfies Meta<typeof Layout>
+} satisfies Meta<typeof LayoutPrimitive>
 
 export default meta
 type Story = StoryObj<typeof meta>

src/components/layout/layout.tsx

@@ -1,12 +1,34 @@
 import { ReactNode } from 'react'
+import { Outlet } from 'react-router-dom'
 
 import { Header, HeaderProps } from '@/components'
+import { useMeQuery } from '@/services/auth/auth.service'
 
 import s from './layout.module.scss'
 
-export type LayoutProps = { children: ReactNode } & HeaderProps
+export const Layout = () => {
+  const { data, isError, isLoading } = useMeQuery()
 
-export const Layout = ({ children, ...headerProps }: LayoutProps) => {
+  if (isLoading) {
+    return <div>loading...</div>
+  }
+
+  return (
+    <LayoutPrimitive
+      avatar={data?.avatar ?? null}
+      email={data?.email ?? ''}
+      isLoggedIn={!isError && !!data}
+      onLogout={() => {}}
+      userName={data?.name ?? ''}
+    >
+      <Outlet />
+    </LayoutPrimitive>
+  )
+}
+
+export type LayoutPrimitiveProps = { children: ReactNode } & HeaderProps
+
+export const LayoutPrimitive = ({ children, ...headerProps }: LayoutPrimitiveProps) => {
   return (
     <div className={s.layout}>
       <Header {...headerProps} />

src/components/ui/page/page.module.scss

@@ -1,6 +1,6 @@
 .root {
   display: flex;
   justify-content: center;
+  width: 100%;
   margin-top: 36px;
-  padding-inline: 24px;
 }

src/router.tsx

@@ -6,6 +6,7 @@ import {
   createBrowserRouter,
 } from 'react-router-dom'
 
+import { Layout } from '@/components/layout'
 import { DeckPage } from '@/pages/deck-page/deck-page'
 
 import { DecksPage, SignInPage } from './pages'
@@ -36,10 +37,15 @@ const privateRoutes: RouteObject[] = [
 
 const router = createBrowserRouter([
   {
-    children: privateRoutes,
+    children: [
-    element: <PrivateRoutes />,
+      {
+        children: privateRoutes,
+        element: <PrivateRoutes />,
+      },
+      ...publicRoutes,
+    ],
+    element: <Layout />,
   },
-  ...publicRoutes,
 ])
 
 export const Router = () => {