filling details start

This commit is contained in:
Priyatham-sai-chand 2020-12-10 23:12:55 +05:30
parent ef40a8c01d
commit e1a2ccfb1c
1 changed files with 69 additions and 9 deletions

View File

@ -1,15 +1,75 @@
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 = () => {
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>
);
const [foodState, setFoodState] = useState(null);
return (
<Container>
<NavBar></NavBar>
<br></br>
<br></br>
<Heading>Details</Heading>
<br></br>
<h1></h1>
<h1></h1>
<div>
Source:&nbsp;&nbsp;
<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: &nbsp;&nbsp;
<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>
);
}
export default FillingDetails;