filling details start
This commit is contained in:
parent
ef40a8c01d
commit
e1a2ccfb1c
|
@ -1,14 +1,74 @@
|
||||||
import React from 'react';
|
import React,{useState} from 'react';
|
||||||
import {Dropdown, DropdownButton} from 'react-bootstrap';
|
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 FillingDetails = () => {
|
||||||
|
|
||||||
|
const [foodState, setFoodState] = useState(null);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownButton id="dropdown-basic-button" title="Dropdown button">
|
<Container>
|
||||||
<Dropdown.Item href="#/action-1">asdf</Dropdown.Item>
|
<NavBar></NavBar>
|
||||||
<Dropdown.Item href="#/action-2">zxcv</Dropdown.Item>
|
<br></br>
|
||||||
<Dropdown.Item href="#/action-3">qewrty</Dropdown.Item>
|
<br></br>
|
||||||
</DropdownButton>
|
<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