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,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:&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>
); );
} }