1+ 'use client'
2+ import React , { useEffect , useState } from 'react'
3+ import { Tabs , TabsContent , TabsList , TabsTrigger } from '@repo/ui/molecules/shadcn/Tabs'
4+
5+ import Settings from '../../../components/Settings'
6+ import NotionTables from '../../../components/NotionTables'
7+ import { useMedia } from "react-use" ;
8+ import { Select , SelectContent , SelectItem , SelectTrigger } from '@repo/ui/molecules/shadcn/Select'
9+ import { tablesInDatabase } from '../../../lib/constant'
10+ import Overview from './_components/Overview'
11+
12+ const EmotionalMentalPage = ( ) => {
13+ let database = "Emotional & Mental"
14+ const isMobile = useMedia ( "(max-width: 1324px)" , false ) ;
15+ const [ selectedValue , setSelectedValue ] = useState ( 'Overvi ew' )
16+ const [ tables , setTables ] = useState ( { } )
17+ const handleSelect = ( value :any ) => {
18+ setSelectedValue ( value )
19+ }
20+
21+ useEffect ( ( ) => {
22+ if ( tablesInDatabase && tablesInDatabase [ database ] ) {
23+ setTables ( tablesInDatabase [ database ] )
24+ }
25+ } , [ tablesInDatabase ] )
26+
27+ if ( isMobile ) {
28+ return (
29+ < div className = 'flex flex-col items-center w-full my-6' >
30+ < Select onValueChange = { handleSelect } >
31+ < SelectTrigger className = 'my-4 mx-8 w-[200px]' >
32+ < div > { selectedValue } </ div >
33+ </ SelectTrigger >
34+ < SelectContent className = 'w-[200px]' >
35+ < SelectItem key = "Overview" value = "Overview" >
36+ < div className = 'flex items-center justify-start gap-4 w-[200px]' >
37+ < div > Overview</ div >
38+ </ div >
39+ </ SelectItem >
40+ < SelectItem key = "Notion Tables" value = "Notion Tables" >
41+ < div className = 'flex items-center justify-start gap-4 w-[200px]' >
42+ < div > Notion Tables</ div >
43+ </ div >
44+ </ SelectItem >
45+ < SelectItem key = "Settings" value = "Settings" >
46+ < div className = 'flex items-center justify-start gap-4 w-[200px]' >
47+ < div > Settings</ div >
48+ </ div >
49+ </ SelectItem >
50+ </ SelectContent >
51+ </ Select >
52+ { selectedValue === 'Overview' && < Overview /> }
53+ { selectedValue === 'Notion Tables' && < NotionTables tables = { tables } /> }
54+ { selectedValue === 'Settings' && < Settings tables = { tables } /> }
55+ </ div >
56+ )
57+ }
58+
59+ return (
60+ < Tabs className = 'w-full' defaultValue = 'overview' >
61+ < TabsList className = 'flex items-center justify-start flex-wrap rounded-none my-4 gap-4 bg-inherit' >
62+ < TabsTrigger key = "Overview" value = "Overview" className = 'flex gap-1 border-b-2 shadow-md shadow-border/10 hover:bg-accent ' >
63+ < div > Overview</ div >
64+ </ TabsTrigger >
65+ < TabsTrigger key = "Notion Tables" value = "Notion Tables" className = 'flex gap-1 border-b-2 shadow-md shadow-border/10 hover:bg-accent ' >
66+ < div > Notion Tables</ div >
67+ </ TabsTrigger >
68+ < TabsTrigger key = "Settings" value = "Settings" className = 'flex gap-1 border-b-2 shadow-md shadow-border/10 hover:bg-accent ' >
69+ < div > Settings</ div >
70+ </ TabsTrigger >
71+ </ TabsList >
72+ < TabsContent value = 'Overview' >
73+ < Overview />
74+ </ TabsContent >
75+ < TabsContent value = 'Notion Tables' >
76+ < NotionTables tables = { tables } />
77+ </ TabsContent >
78+ < TabsContent value = 'Settings' >
79+ < Settings tables = { tables } />
80+ </ TabsContent >
81+ </ Tabs >
82+ )
83+ }
84+
85+ export default EmotionalMentalPage
0 commit comments