filling details start
This commit is contained in:
parent
ef40a8c01d
commit
e1a2ccfb1c
|
@ -1,14 +1,74 @@
|
|||
import React from 'react';
|
||||
import {Dropdown, DropdownButton} from 'react-bootstrap';
|
||||
import React,{useState} from 'react';
|
||||
import Form from 'react-bootstrap';
|
||||
import styled from 'styled-components';
|
||||
import NavBar from './NavBar';
|
||||
const Selector = styled.select`
|
||||
|
||||
width: 25%;
|
||||
|
||||
`;
|
||||
const Container = styled.div`
|
||||
|
||||
padding: 50px;
|
||||
|
||||
`;
|
||||
const Heading = styled.h1`
|
||||
|
||||
|
||||
color: #66bfbf !important;
|
||||
|
||||
`;
|
||||
|
||||
|
||||
const FillingDetails = () => {
|
||||
|
||||
const [foodState, setFoodState] = useState(null);
|
||||
|
||||
return (
|
||||
<DropdownButton id="dropdown-basic-button" title="Dropdown button">
|
||||
<Dropdown.Item href="#/action-1">asdf</Dropdown.Item>
|
||||
<Dropdown.Item href="#/action-2">zxcv</Dropdown.Item>
|
||||
<Dropdown.Item href="#/action-3">qewrty</Dropdown.Item>
|
||||
</DropdownButton>
|
||||
<Container>
|
||||
<NavBar></NavBar>
|
||||
<br></br>
|
||||
<br></br>
|
||||
<Heading>Details</Heading>
|
||||
<br></br>
|
||||
<h1></h1>
|
||||
<h1></h1>
|
||||
<div>
|
||||
Source:
|
||||
<Selector
|
||||
className="custom-select"
|
||||
value={foodState}
|
||||
onChange={(e) => {
|
||||
const selectedFood = e.target.value;
|
||||
setFoodState(selectedFood);
|
||||
}}
|
||||
>
|
||||
<option value="source1" >source12</option>
|
||||
<option value="source2">source2</option>
|
||||
<option value="source3">source3</option>
|
||||
</Selector>
|
||||
<br></br>
|
||||
{foodState}
|
||||
<br></br>
|
||||
<br></br>
|
||||
<br></br>
|
||||
Destination:
|
||||
<Selector
|
||||
className="custom-select"
|
||||
value={foodState}
|
||||
onChange={(e) => {
|
||||
const selectedFood = e.target.value;
|
||||
setFoodState(selectedFood);
|
||||
}}
|
||||
>
|
||||
<option value="dest1" >dest1</option>
|
||||
<option value="dest2">dest2</option>
|
||||
<option value="dest3">dest3</option>
|
||||
</Selector>
|
||||
<br></br>
|
||||
{foodState}
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue