Skip to content

Commit 4c6a770

Browse files
author
Kevin Jose
committed
[22/5/2020][TAILWIND_WORKCATION] added tabs one with a form content
1 parent 74c2cdd commit 4c6a770

File tree

1 file changed

+181
-129
lines changed

1 file changed

+181
-129
lines changed

‎may-2020/tailwind_css/rt-workcation/src/components/SearchFilters.js‎

Lines changed: 181 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import useToogle from '../hooks/useToggle';
33
import Checkbox from './Checkbox';
44
import Radio from './Radio';
55

66
const SearchFilters = () => {
77
const [isOpen, setOpen] = useToogle(false);
8+
const [openTab, setOpenTab] = useState(1);
89

910
return (
1011
<section className='bg-gray-800 xl:w-1/4 xl:h-full'>
@@ -39,142 +40,193 @@ const SearchFilters = () => {
3940
>
4041
<path d='M3 6a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1zm3 6a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1zm4 5a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-4z' />
4142
</svg>
42-
<span className='ml-1 text-white font-medium'>Filters</span>
43+
<span className='ml-1 text-white font-medium'>Edit</span>
4344
</button>
4445
</div>
45-
<form
46-
className={`xl:block xl:h-full xl:flex xl:flex-col xl:justify-between ${
46+
{/* Tabbed section start */}
47+
48+
<div
49+
className={`xl:block w-full flex flex-col xl:h-full ${
4750
isOpen ? 'block' : 'hidden'
48-
}`}
51+
} `}
4952
>
50-
{/* Have a container that is scrollable along y axis if filters increase also to justify content */}
51-
<div className='lg:flex xl:block xl:overflow-y-auto'>
52-
{/* Container for form elements providing padding border etc. also group a few filters*/}
53-
<div className='px-4 py-4 border-t border-gray-900 lg:w-1/3 border xl:w-full'>
54-
<div className='-mx-2 flex flex-wrap'>
55-
<label className='block w-1/2 px-2 sm:w-1/4 lg:w-1/2'>
56-
<span className='text-sm font-semibold text-gray-500'>
57-
Title
58-
</span>
59-
<select className='mt-1 block w-full focus:text-white text-gray-900 shadow focus:bg-gray-600 h-8 outline-none'>
60-
<option></option>
61-
<option>4</option>
62-
</select>
63-
</label>
64-
<label className='block w-1/2 px-2 sm:w-1/4 lg:w-1/2'>
65-
<span className='text-sm font-semibold text-gray-500'>
66-
Title
67-
</span>
68-
<select className='mt-1 block w-full focus:text-white text-gray-900 shadow focus:bg-gray-600 h-8 outline-none'>
69-
<option></option>
70-
<option>2</option>
71-
<option>3</option>
72-
</select>
73-
</label>
74-
<label className='mt-4 lg:mt-4 sm:mt-0 block w-full px-2 sm:w-1/2 lg:w-full'>
75-
<span className='text-sm font-semibold text-gray-500'>
76-
Title
77-
</span>
78-
<select className='mt-1 block w-full focus:text-white text-gray-900 shadow focus:bg-gray-600 h-8 outline-none'>
79-
<option></option>
80-
<option>Up to $2,000/wk</option>
81-
</select>
82-
</label>
53+
<ul
54+
className='flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row px-3'
55+
role='tablist'
56+
>
57+
<li className='mr-2 flex-auto text-center'>
58+
<a
59+
className={
60+
'text-xs font-bold uppercase px-5 py-3 block leading-normal ' +
61+
(openTab === 1
62+
? 'text-white border-b border-white'
63+
: 'text-gray-600')
64+
}
65+
onClick={e => {
66+
e.preventDefault();
67+
setOpenTab(1);
68+
}}
69+
data-toggle='tab'
70+
href='#link1'
71+
role='tablist'
72+
>
73+
Content
74+
</a>
75+
</li>
76+
<li className='mr-2 flex-auto text-center'>
77+
<a
78+
className={
79+
'text-xs font-bold uppercase px-5 py-3 block leading-normal ' +
80+
(openTab === 2
81+
? 'text-white border-b border-white'
82+
: 'text-gray-600')
83+
}
84+
onClick={e => {
85+
e.preventDefault();
86+
setOpenTab(2);
87+
}}
88+
data-toggle='tab'
89+
href='#link2'
90+
role='tablist'
91+
>
92+
Settings
93+
</a>
94+
</li>
95+
</ul>
96+
{/* Tab 1 content */}
97+
<form
98+
className={` xl:flex-col xl:justify-between ${
99+
openTab === 1 ? 'xl:flex block' : 'hidden'
100+
} xl:pb-16 h-64 overflow-y-auto xl:h-full`}
101+
>
102+
<div className='lg:flex xl:block'>
103+
<div className='px-4 py-4 border-t border-gray-900 lg:w-1/3 border xl:w-full'>
104+
<div className='-mx-2 flex flex-wrap'>
105+
<label className='block w-1/2 px-2 sm:w-1/4 lg:w-1/2'>
106+
<span className='text-sm font-semibold text-gray-500'>
107+
Title
108+
</span>
109+
<select className='mt-1 block w-full focus:text-white text-gray-900 shadow focus:bg-gray-600 h-8 outline-none'>
110+
<option></option>
111+
<option>4</option>
112+
</select>
113+
</label>
114+
<label className='block w-1/2 px-2 sm:w-1/4 lg:w-1/2'>
115+
<span className='text-sm font-semibold text-gray-500'>
116+
Title
117+
</span>
118+
<select className='mt-1 block w-full focus:text-white text-gray-900 shadow focus:bg-gray-600 h-8 outline-none'>
119+
<option></option>
120+
<option>2</option>
121+
<option>3</option>
122+
</select>
123+
</label>
124+
<label className='mt-4 lg:mt-4 sm:mt-0 block w-full px-2 sm:w-1/2 lg:w-full'>
125+
<span className='text-sm font-semibold text-gray-500'>
126+
Title
127+
</span>
128+
<select className='mt-1 block w-full focus:text-white text-gray-900 shadow focus:bg-gray-600 h-8 outline-none'>
129+
<option></option>
130+
<option>Up to $2,000/wk</option>
131+
</select>
132+
</label>
133+
</div>
83134
</div>
84-
</div>
85-
<div className='px-4 py-4 border-t border-gray-900 lg:w-1/3 border xl:w-full'>
86-
<span className='block text-sm font-semibold text-gray-500'>
87-
Property name
88-
</span>
89-
<div className='sm:flex sm:-mx-2 lg:block lg:mx-0'>
90-
<Radio
91-
content={'A'}
92-
value={'a'}
93-
name={'propertyType'}
94-
color='white'
95-
background='gray'
96-
/>
97-
<Radio
98-
content={'B'}
99-
value={'b'}
100-
name={'propertyType'}
101-
color='white'
102-
background='gray'
103-
/>
104-
<Radio
105-
content={'C'}
106-
value={'c'}
107-
name={'propertyType'}
108-
color='white'
109-
background='gray'
110-
/>
111-
<Radio
112-
content={'D'}
113-
value={'d'}
114-
name={'propertyType'}
115-
color='white'
116-
background='gray'
117-
/>
135+
<div className='px-4 py-4 border-t border-gray-900 lg:w-1/3 border xl:w-full'>
136+
<span className='block text-sm font-semibold text-gray-500'>
137+
Property name
138+
</span>
139+
<div className='sm:flex sm:-mx-2 lg:block lg:mx-0'>
140+
<Radio
141+
content={'A'}
142+
value={'a'}
143+
name={'propertyType'}
144+
color='white'
145+
background='gray'
146+
/>
147+
<Radio
148+
content={'B'}
149+
value={'b'}
150+
name={'propertyType'}
151+
color='white'
152+
background='gray'
153+
/>
154+
<Radio
155+
content={'C'}
156+
value={'c'}
157+
name={'propertyType'}
158+
color='white'
159+
background='gray'
160+
/>
161+
<Radio
162+
content={'D'}
163+
value={'d'}
164+
name={'propertyType'}
165+
color='white'
166+
background='gray'
167+
/>
168+
</div>
118169
</div>
119-
</div>
120-
<div className='px-4 py-4 border-t border-gray-900 lg:w-1/3 border xl:w-full'>
121-
<span className='block text-sm font-semibold text-gray-500'>
122-
Property name
123-
</span>
124-
<div className='sm:flex sm:-mx-2 sm:flex-wrap'>
125-
<Checkbox
126-
name={'a'}
127-
content={'A'}
128-
color='white'
129-
background='gray'
130-
/>
131-
<Checkbox
132-
name={'b'}
133-
content={'B'}
134-
color='white'
135-
background='gray'
136-
/>
137-
<Checkbox
138-
name={'c'}
139-
content={'C'}
140-
color='white'
141-
background='gray'
142-
/>
143-
<Checkbox
144-
name={'d'}
145-
content={'D'}
146-
color='white'
147-
background='gray'
148-
/>
149-
<Checkbox
150-
name={'e'}
151-
content={'E'}
152-
color='white'
153-
background='gray'
154-
/>
155-
<Checkbox
156-
name={'f'}
157-
content={'F'}
158-
color='white'
159-
background='gray'
160-
/>
161-
<Checkbox
162-
name={'g'}
163-
content={'G'}
164-
color='white'
165-
background='gray'
166-
/>
170+
<div className='px-4 py-4 border-t border-gray-900 lg:w-1/3 border xl:w-full'>
171+
<span className='block text-sm font-semibold text-gray-500'>
172+
Property name
173+
</span>
174+
<div className='sm:flex sm:-mx-2 sm:flex-wrap'>
175+
<Checkbox
176+
name={'a'}
177+
content={'A'}
178+
color='white'
179+
background='gray'
180+
/>
181+
<Checkbox
182+
name={'b'}
183+
content={'B'}
184+
color='white'
185+
background='gray'
186+
/>
187+
<Checkbox
188+
name={'c'}
189+
content={'C'}
190+
color='white'
191+
background='gray'
192+
/>
193+
<Checkbox
194+
name={'d'}
195+
content={'D'}
196+
color='white'
197+
background='gray'
198+
/>
199+
<Checkbox
200+
name={'e'}
201+
content={'E'}
202+
color='white'
203+
background='gray'
204+
/>
205+
<Checkbox
206+
name={'f'}
207+
content={'F'}
208+
color='white'
209+
background='gray'
210+
/>
211+
<Checkbox
212+
name={'g'}
213+
content={'G'}
214+
color='white'
215+
background='gray'
216+
/>
217+
</div>
167218
</div>
168219
</div>
169-
</div>
170-
<div className='bg-gray-900 px-4 py-4 sm:text-right'>
171-
<button
172-
className={`block w-full sm:w-auto sm:inline-block bg-blue-800 hover:bg-blue-700 font-semibold text-white px-4 py-2 rounded-lg xl:block xl:w-full`}
173-
>
174-
Filter out
175-
</button>
176-
</div>
177-
</form>
220+
<div className='bg-gray-900 px-4 py-4 sm:text-right'>
221+
<button
222+
className={`block w-full sm:w-auto sm:inline-block bg-blue-800 hover:bg-blue-700 font-semibold text-white px-4 py-2 rounded-lg xl:block xl:w-full`}
223+
>
224+
Filter out
225+
</button>
226+
</div>
227+
</form>
228+
</div>
229+
{/* Tabbed section end */}
178230
</section>
179231
);
180232
};

0 commit comments

Comments
 (0)