ss
ssunknown
abc
4 years ago
12 kB
5
Indexable
import React, { Component } from 'react' import styled from 'styled-components' import HeaderButton from './HeaderButton' import ProfileView from './ProfileView' import {Colors} from '../styledHelpers/Colors' // components/styledHelpers/Colors // import icons import commentsIcon from '../../assets/icons/comments.svg' import editIcon from '../../assets/icons/plus.svg' const Wrapper = styled.div` display: flex; flex-direction: column; background-color: ${Colors.White}; padding: 1em; box-shadow: 0px 3px 3px ${Colors.Silver}; border-radius: 6px; `; const Header = styled.section` align-self: flex-start; border-bottom: #ccc solid 1px; width: 97%; padding: 0 1em 2em 1em; position: relative; `; const HeaderTopBar = styled.div` text-align: right; display: flex; justify-content: flex-end; `; const Container = styled.div` width: 100%; align-self: flex-end; display: flex; position: relative; `; const ProfileRow = styled.div` justify-self: flex-start; align-self: center; padding: 0 2em; `; const Row = styled.div` width: 50%; display: flex; flex-direction: column; `; const RightRow = styled.div` width: 50%; display: flex; flex-direction: column; justify-content: flex-end; `; const ExpandRow = styled.div` justify-self: flex-start; /* align-self: center; */ flex-grow: 2; color: #232c47; display: flex; h3 { font-size: 1.2em; font-weight: bolder; line-height: 1.2; } p { margin-top: 0.6em; font-size: 1em; line-height: 1.4; } `; const Row1 = styled.div` width: 16%; float:left; `; const Row2 = styled.div` width: 16%; float:left; `; const Row3 = styled.div` width: 16%; float:left; `; const Row4 = styled.div` width: 16%; float:left; `; const Row5 = styled.div` width: 16%; float:left; `; const Row6 = styled.div` width: 16%; float:left; `; const Row7 = styled.div` width: -80%; float:left; `; const Section = styled.section` border-bottom: #ccc solid 1px; padding: 2em 1em; position: relative; width: 100%; `; const SectionTitle = styled.h3` font-size: 1.2em; color: #a5a8b4; `; const Tags = styled.div` display: flex; flex-wrap: wrap; margin: 1em 0em; `; const Tag = styled.span` color: #5a9eb0; background-color: #e6f0f3; padding: .4em; margin: 0 .4em; border-radius: 3px 6px; &:first-child { margin-left: 0; } `; const h3 = styled.div` font-size: 1.2em; font-weight: bolder; line-height: 1.2; `; class Profile extends Component { render() { return ( <Wrapper> <Header> <HeaderTopBar> <HeaderButton to="/comments" icon={commentsIcon}>Message</HeaderButton> <HeaderButton to="#" icon={editIcon}>Create a request</HeaderButton> <HeaderButton to="#" icon={editIcon}>Add to a cluster</HeaderButton> </HeaderTopBar> <Container> <ProfileRow> <ProfileView /> </ProfileRow> <ExpandRow> <Row> <h3> Humberta swift<br /> Clifford Chance </h3> <p> New-york<br /> Partner </p> </Row> <RightRow> <p> humbertaswift@gmail.com<br /> +33 (0)6 12 34 56 78 </p> </RightRow> </ExpandRow> </Container> </Header> <Section> <SectionTitle>Expertise</SectionTitle> <Tags> <Tag>Mergers and acquisition</Tag> </Tags> <SectionTitle>Specialties</SectionTitle> <Tags> <Tag>Cross border operation</Tag> <Tag>Transaction over 500M/$</Tag> </Tags> <SectionTitle>Admission to practice law</SectionTitle> <Tags> <Tag>Paris bar association</Tag> <Tag>Tunisian bar association</Tag> </Tags> <SectionTitle>Counties</SectionTitle> <Tags> <Tag>Tunisia</Tag> </Tags> </Section> <Section> <h3> Panel Informations </h3> <br/> <br/> <SectionTitle>Hourly fee</SectionTitle> 610$/hour (Negociated) <br/> <br/> <SectionTitle>Terms & conditions </SectionTitle> Monthly 10k$ retainer - see with Jeanny Smith <br/> <br/> <img src="" alt="Attachment_lorem-ipsum25425.jpg"></img> </Section> <Section> Services & projects <br/> <br/> Corporate M&A and international acquisitions <br/> <br/> <br/> Internal correspondates </Section> <Section> Proposals <br/> <br/> <Row1> Name </Row1> <Row2> Entity </Row2> <Row3> Location </Row3> <Row4> Expertise </Row4> <Row5> Date </Row5> </Section> <Section> <Row1> Operati Ti.. <br/><br/> Op. Prometh.. <br/><br/> Op. Latandre </Row1> <Row2> Renaualt Co.. <br/> <br/> Renaualt HQ.. <br/><br/> Renaualt Br.. </Row2> <Row3> France <br/><br/> USA <br/><br/> Italia </Row3> <Row4> #Tax <br/><br/> #MSA <br/><br/> #Social </Row4> <Row5> 20/01/2018 <br/><br/> 18/02/2018 <br/><br/> 18/02/2018 <br/><br/> </Row5> <Row6> Racine <br/><br/> Clifford Chance <br/> <br/> SVZ </Row6> <Row7> <SectionTitle>See more proposals</SectionTitle> </Row7> </Section> <Section> Internal Reviews <br/><br/><br/> <Row1> Name </Row1> <Row2> Entity </Row2> <Row3> Location </Row3> <Row4> Expertise </Row4> <Row5> Date </Row5> </Section> <Section> <Row1> Operati Ti.. <br/><br/> Op. Prometh.. <br/><br/> Op. Latandre <br/> </Row1> <Row2> Renaualt Co.. <br/><br/> Renaualt HQ.. <br/> <br/> Renaualt Br.. </Row2> <Row3> France <br/> <br/> USA <br/> <br/> Italia </Row3> <Row4> #Tax <br/> <br/> #MSA <br/> <br/> #Social </Row4> <Row5> 20/01/2018 <br/> <br/> 18/02/2018 <br/><br/> 18/02/2018 </Row5> <Row7> <br/><br/> <SectionTitle>See more Reviews</SectionTitle> </Row7> </Section> <Section> Amount of fees <br/><br/> <Row1> Year <br/> <br/> 2019 <br/> 2018 <br/> 2017 </Row1> <Row2> Cost center <br/><br/> CS 153 <br/> CS 153 <br/> CS 47 <br/> CS 153 <br/> CS 32 </Row2> <Row3> Total amount <br/><br/> 3 500$ <br/> 9 500$ <br/> 10 500$ <br/> 18 500$ <br/> 15 500$ </Row3> <Row4> Law firm <br/><br/> Cliford chance <br/> Linklaters <br/> Linklaters <br/> Linklaters <br/> Linklaters </Row4> </Section> </Wrapper> ) } } export default Profile;
Editor is loading...