|
1 | | -import { useState } from 'react'; |
2 | | -import Dropdown from './compontents/Dropdown/Dropdown'; |
3 | | -import { DropdownOption } from './compontents/Dropdown/DropdownOption'; |
4 | | - |
5 | | -const options: DropdownOption[] = [ |
6 | | - { value: '1', label: 'Option 1' }, |
7 | | - { value: '2', label: 'Option 2' }, |
8 | | - { value: '3', label: 'Option 3' }, |
9 | | - { value: '4', label: 'Option 4' }, |
10 | | - { value: '5', label: 'Option 5' }, |
11 | | - { value: '6', label: 'Option 6' }, |
12 | | - { value: '7', label: 'Option 7' }, |
13 | | - { value: '8', label: 'Option 8' }, |
14 | | - { value: '9', label: 'Option 9' }, |
15 | | - { value: '10', label: 'Option 10' }, |
16 | | -]; |
17 | | - |
18 | 1 | function App() { |
19 | | - const [selectedOption1, setSelectedOption1] = useState( |
20 | | - undefined as DropdownOption | undefined, |
21 | | - ); |
22 | | - const [selectedOption2, setSelectedOption2] = useState( |
23 | | - undefined as DropdownOption | undefined, |
24 | | - ); |
25 | | - |
26 | 2 | return ( |
27 | 3 | <> |
28 | | - <h1>Dropdown Komponenta Test</h1> |
29 | | - <p> |
30 | | - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis |
31 | | - blanditiis corporis sunt molestias ipsum reprehenderit, sint natus |
32 | | - quisquam similique, impedit officiis vero! Unde et sapiente, temporibus |
33 | | - iusto quas saepe voluptatibus. |
34 | | - </p> |
35 | | - <Dropdown |
36 | | - label='Hello' |
37 | | - placeholder='World' |
38 | | - options={options} |
39 | | - setOption={(option: DropdownOption) => setSelectedOption1(option)} |
40 | | - selectedOption={selectedOption1} |
41 | | - errorLabel='Error' |
42 | | - width='500px' |
43 | | - /> |
44 | | - <p> |
45 | | - Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste doloribus |
46 | | - provident corporis ea perspiciatis nulla repellat ad aspernatur |
47 | | - laudantium eius voluptate soluta, dignissimos, a impedit dolor maxime |
48 | | - corrupti et debitis? |
49 | | - </p> |
50 | | - <Dropdown |
51 | | - label='Hello' |
52 | | - placeholder='World' |
53 | | - options={options} |
54 | | - setOption={(option: DropdownOption) => setSelectedOption2(option)} |
55 | | - selectedOption={selectedOption2} |
56 | | - errorLabel='Error' |
57 | | - width='500px' |
58 | | - /> |
59 | | - <p> |
60 | | - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui excepturi |
61 | | - provident possimus corrupti quam, cum voluptatem eaque in accusamus |
62 | | - mollitia iure reprehenderit, ullam fugit natus ipsam dolore perspiciatis |
63 | | - adipisci perferendis! |
64 | | - </p> |
| 4 | + <h1>App</h1> |
65 | 5 | </> |
66 | 6 | ); |
67 | 7 | } |
|
0 commit comments