1+ import React from 'react' ;
2+ import { ButtonGroup } from '@material-tailwind/react' ;
3+ import { Select , Option } from "@material-tailwind/react" ;
4+ import { Button } from '@material-tailwind/react' ;
5+
6+ // import fack from '../../fack.json';
7+ import year from '../../year.json' ;
8+ import months from '../../months.json' ;
9+ import { useState } from 'react' ;
10+
11+ const Calendermain = ( ) => {
12+ const [ vlu , setVlu ] = useState ( 2 ) ;
13+ const [ bool , setBool ] = useState ( true ) ;
14+ const [ bool2 , setBool2 ] = useState ( false ) ;
15+
16+ const [ yer , setYer ] = useState ( new Date ( ) . getFullYear ( ) ) ;
17+ const [ mont , setMont ] = useState ( new Date ( ) . getMonth ( ) + 1 ) ;
18+
19+ const month = ( ) => {
20+ setVlu ( 2 ) ;
21+
22+ // --------------------month
23+
24+ if ( bool == true ) {
25+ setBool ( true ) ;
26+ } else {
27+ setBool ( true ) ;
28+ }
29+
30+ // ------------yeaar
31+ if ( bool2 == false ) {
32+ setBool2 ( false ) ;
33+ } else {
34+ setBool2 ( false ) ;
35+ }
36+
37+
38+ }
39+ const years = ( ) => {
40+ setVlu ( 1 ) ;
41+ // --------------------month
42+ if ( bool == true ) {
43+ setBool ( false ) ;
44+ } else {
45+ setBool ( false ) ;
46+ }
47+ // ------------yeaar
48+
49+ if ( bool2 == false ) {
50+ setBool2 ( true ) ;
51+ } else {
52+ setBool2 ( true ) ;
53+ }
54+
55+
56+ }
57+
58+ const selectYear = ( e ) => {
59+ setYer ( e ) ;
60+ }
61+ const selectMonth = ( e ) => {
62+ setMont ( e ) ;
63+ }
64+ const ganarate = ( ) => {
65+ if ( vlu == 2 ) {
66+ // console.log(yer, mont);
67+ fetch ( `https://api.aladhan.com/v1/calendarByAddress/${ yer } ${ mont } ${ localStorage . getItem ( 'sTime' ) } )
68+ . then ( res => res . json ( ) )
69+ . then ( data => console . log ( data . data ) )
70+
71+ } else {
72+ console . log ( yer ) ;
73+
74+ }
75+ }
76+
77+
78+ return (
79+ < div className = "h-screen md:mx-10" >
80+ < div className = "h-fit bg-white mt-10 md:p-10 p-3 md:rounded-md" >
81+
82+ < h1 className = 'text-2xl font-semibold' > Salat Timetable</ h1 >
83+ < div className = "flex flex-col justify-center mt-4 items-center" >
84+
85+ < div >
86+ < ButtonGroup variant = "outlined" >
87+ < Button onClick = { month } > Monthly</ Button >
88+ < Button onClick = { years } disabled > Yearly</ Button >
89+ </ ButtonGroup >
90+ </ div >
91+ < div >
92+ {
93+ bool && < div className = 'flex justify-center items-center mt-4 gap-4' >
94+ < Select label = "Select Year" onChange = { selectYear } required >
95+ {
96+ year . map ( ( e ) => < Option value = { e . id } key = { e . id } > { e . id } </ Option > )
97+ }
98+
99+ </ Select >
100+ < Select label = "Select Month" onChange = { selectMonth } required >
101+ {
102+ months . map ( ( e ) => < Option value = { e . id } key = { e . name } > { e . name } </ Option > )
103+ }
104+
105+ </ Select >
106+
107+ </ div >
108+ }
109+ {
110+ bool2 && < div className = 'flex justify-center items-center mt-4 gap-4' >
111+ < Select label = "Select Year" onChange = { selectYear } required >
112+ {
113+ year . map ( ( e ) => < Option value = { e . id } key = { e . id } > { e . id } </ Option > )
114+ }
115+
116+ </ Select >
117+
118+ </ div >
119+ }
120+ < div className = 'flex items-center justify-center mt-5' >
121+ < Button variant = 'gradient' onClick = { ganarate } > Ganarate</ Button >
122+ </ div >
123+ </ div >
124+
125+ </ div >
126+
127+ </ div >
128+ </ div >
129+ ) ;
130+ } ;
131+
132+ export default Calendermain ;
0 commit comments