priyatham
/
Locaft-backend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pricing selection done

This commit is contained in:
Priyatham Sai Chand 2021-03-06 07:37:43 +05:30
parent f282801e87
commit f60406e45f
1 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/PricingPlan.js
View File

@ -1,7 +1,7 @@
import React, { useState,Component } from 'react'; import React, { useState,Component } from 'react';
import NavBar from './NavBar'; import NavBar from './NavBar';
import Footer from './Footer'; import Footer from './Footer';
import styled from 'styled-components'; import styled,{css} from 'styled-components';
const size = { const size = {
mobileS: '320px', mobileS: '320px',
@ -36,28 +36,9 @@ const PricingPlanContainer = styled.div`
`; `;
const Pricing = styled.section`
background: white;
width:300px;
border-radius: 25px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
overflow: hidden;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
color: #555555;
margin: 15px;
&:hover {
box-shadow: 0 0 15px rgba(0,0,0,0.4);
transform: scale(1.05);
cursor: pointer;
}
`;
const Radio = styled.input` const Radio = styled.input`
display:none; display:none;
@ -68,6 +49,34 @@ const Label = styled.label`
`; `;
const Pricing = styled.section`
background: white;
border-radius: 25px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
overflow: hidden;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
color: #555555;
margin: 15px;
&:hover {
cursor: pointer;
box-shadow: 0 0 15px rgba(0,0,0,0.4);
transform: scale(1.05);
}
${props => props.pricing_id == props.pricing_plan ? css`
box-shadow: 0 0 15px rgba(0,0,0,0.4);
transform: scale(1.05);
`:css``};
`;
const Text = styled.p` const Text = styled.p`
font-size: 0.9em; font-size: 0.9em;
text-align: center; text-align: center;
@ -191,7 +200,7 @@ const [pricing, setPricing] = useState();
{pricing} {pricing}
<PricingPlanContainer onChange={event => setPricing(event.target.value)}> <PricingPlanContainer onChange={event => setPricing(event.target.value)}>
<Pricing> <Pricing pricing_plan={pricing} pricing_id="basic">
<Radio type ="radio" value="basic" name="pricing" id = "basic"/> <Radio type ="radio" value="basic" name="pricing" id = "basic"/>
<Label for="basic"> <Label for="basic">
<Header> <Header>
@ -215,7 +224,7 @@ const [pricing, setPricing] = useState();
</Actions> </Actions>
</Label> </Label>
</Pricing> </Pricing>
<Pricing> <Pricing pricing_plan={pricing} pricing_id="intermediate">
<Radio type="radio" value="intermediate" name="pricing" id="intermediate" /> <Radio type="radio" value="intermediate" name="pricing" id="intermediate" />
<Label for="intermediate" > <Label for="intermediate" >
<SpecialText>Recommended</SpecialText> <SpecialText>Recommended</SpecialText>
@ -241,7 +250,7 @@ const [pricing, setPricing] = useState();
</Actions> </Actions>
</Label> </Label>
</Pricing> </Pricing>
<Pricing> <Pricing pricing_plan={pricing} pricing_id="luxury">
<Radio type="radio" value="luxury" name="pricing" id="luxury" /> <Radio type="radio" value="luxury" name="pricing" id="luxury" />
<Label for="luxury"> <Label for="luxury">
<Header> <Header>