Create Tasks layout for switching view mode

frontend/src/app/tasks/DayView.tsx

@@ -22,7 +22,6 @@ export const DayView = ({ projects, taskTypes, templates }: DayViewProps) => {
   return (
     <Box
       sx={{
-        padding: { xs: '0 8px', sm: '0 32px' },
         display: 'grid',
         gridTemplateAreas: {
           xs: "'select-template start-timer''divider divider''create-task-form create-task-form''task-list task-list'",
@@ -32,8 +31,6 @@ export const DayView = ({ projects, taskTypes, templates }: DayViewProps) => {
           xs: '1fr',
           sm: '558px 558px'
         },
-        margin: '0 auto',
-        maxWidth: '1146px',
         columnGap: '30px',
         rowGap: '16px'
       }}

frontend/src/app/tasks/layout.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { PropsWithChildren } from 'react'
+import { Tabs, TabList, Tab, Box, Divider } from '@mui/joy'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+export default function TasksLayout({ children }: PropsWithChildren) {
+  const pathname = usePathname()
+
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        padding: { xs: '0 8px', sm: '0' },
+        margin: '0 auto',
+        maxWidth: '1146px',
+        rowGap: '16px'
+      }}
+    >
+      <Tabs
+        sx={{
+          borderRadius: '8px',
+          border: '1px solid #C4C6D0',
+          width: 'fit-content',
+          paddding: '1px'
+        }}
+        size="md"
+        value={pathname}
+      >
+        <TabList disableUnderline>
+          <TimeViewTab path="/tasks">Day</TimeViewTab>
+          <TimeViewTab path="/tasks/week">Week</TimeViewTab>
+          <TimeViewTab path="/tasks/month">Month</TimeViewTab>
+        </TabList>
+      </Tabs>
+      <Divider />
+      {children}
+    </Box>
+  )
+}
+
+const TimeViewTab = ({ children, path }: PropsWithChildren<{ path: string }>) => {
+  return (
+    <Link href={path}>
+      <Tab
+        sx={{ borderRadius: '7px' }}
+        value={path}
+        variant="plain"
+        color="primary"
+        disableIndicator
+      >
+        {children}
+      </Tab>
+    </Link>
+  )
+}

frontend/src/app/tasks/month/page.tsx

@@ -0,0 +1,3 @@
+export default function MonthView() {
+  return <div>Month!</div>
+}

frontend/src/app/tasks/week/page.tsx

@@ -0,0 +1,3 @@
+export default async function WeekView() {
+  return <div>Week!</div>
+}