Profile section is added.

com-dict-client/src/components/Header/index.js

@@ -70,7 +70,7 @@ function TitleBar() {
                 key="profile"
               >
                 <Menu.Item key="cat:0">
-                  <Link to="/#">{user.displayName}</Link>
+                  <Link to="/Profile">{user.displayName}</Link>
                 </Menu.Item>
                 <Menu.Item key="cat:0">
                   <Typography onClick={() => signOut()(firebase, history)}>

com-dict-client/src/components/ProfileSection/src/components/Content/AccountSettings.jsx

@@ -0,0 +1,50 @@
+import { FormControl, FormLabel, Grid, Input, Select } from '@chakra-ui/react'
+
+function AccountSettings() {
+  return (
+    <Grid
+      templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
+      gap={6}
+    >
+      <FormControl id="firstName">
+        <FormLabel>First Name</FormLabel>
+        <Input focusBorderColor="brand.blue" type="text" placeholder="Akash" />
+      </FormControl>
+      <FormControl id="lastName">
+        <FormLabel>Last Name</FormLabel>
+        <Input focusBorderColor="brand.blue" type="text" placeholder="Jha" />
+      </FormControl>
+      <FormControl id="phoneNumber">
+        <FormLabel>Phone Number</FormLabel>
+        <Input
+          focusBorderColor="brand.blue"
+          type="tel"
+          placeholder="(91) 996–1010"
+        />
+      </FormControl>
+      <FormControl id="emailAddress">
+        <FormLabel>Email Address</FormLabel>
+        <Input
+          focusBorderColor="brand.blue"
+          type="email"
+          placeholder="@gmail.com"
+        />
+      </FormControl>
+      <FormControl id="country">
+        <FormLabel>Country</FormLabel>
+        <Select focusBorderColor="brand.blue" placeholder="Select country">
+        <option value="India" selected>
+            India
+          </option>
+          <option value="america">America</option>
+          <option value="england">England</option>
+          <option value="poland">Poland</option>
+          <option value="China">China</option>
+          <option value="Russia">Russia</option>
+        </Select>
+      </FormControl>
+    </Grid>
+  )
+}
+
+export default AccountSettings

com-dict-client/src/components/ProfileSection/src/components/Content/Actions.jsx

@@ -0,0 +1,11 @@
+import { Box, Button } from '@chakra-ui/react'
+
+function Actions() {
+  return (
+    <Box mt={5} py={5} px={8} borderTopWidth={1} borderColor="brand.light">
+      <Button>Update</Button>
+    </Box>
+  )
+}
+
+export default Actions

com-dict-client/src/components/ProfileSection/src/components/Content/CompanySettings.jsx

@@ -0,0 +1,66 @@
+import {
+  FormControl,
+  FormLabel,
+  Grid,
+  Input,
+  InputGroup,
+  InputLeftAddon,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+} from '@chakra-ui/react'
+
+function CompanySettings() {
+  return (
+    <Grid
+      templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
+      gap={6}
+    >
+      <FormControl id="companyId">
+        <FormLabel>User ID</FormLabel>
+        <InputGroup>
+          <InputLeftAddon color="gray.500">
+            <svg width="1em" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fillRule="evenodd"
+                d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z"
+                clipRule="evenodd"
+              />
+            </svg>
+          </InputLeftAddon>
+          <Input
+            focusBorderColor="brand.blue"
+            type="text"
+            placeholder="Dictionary"
+          />
+        </InputGroup>
+      </FormControl>
+      <FormControl id="companyName">
+        <FormLabel>Organisation Name</FormLabel>
+        <Input focusBorderColor="brand.blue" type="text" placeholder="Google" />
+      </FormControl>
+      <FormControl id="emailCompany">
+        <FormLabel>Email Address</FormLabel>
+        <Input
+          focusBorderColor="brand.blue"
+          type="email"
+          placeholder="[email protected]"
+        />
+      </FormControl>
+      <FormControl>
+        <FormLabel>Size</FormLabel>
+        <NumberInput>
+          <NumberInputField placeholder="6000" />
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+      </FormControl>
+    </Grid>
+  )
+}
+
+export default CompanySettings

com-dict-client/src/components/ProfileSection/src/components/Content/Content.jsx

@@ -0,0 +1,62 @@
+import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react'
+
+import AccountSettings from './AccountSettings'
+import Actions from './Actions'
+import CompanySettings from './CompanySettings'
+import Notifications from './Notifications'
+
+const Content = () => {
+  const tabs = ['Account Settings', 'Company Settings', 'Notifications']
+
+  return (
+    <Box
+      as="main"
+      flex={3}
+      d="flex"
+      flexDir="column"
+      justifyContent="space-between"
+      pt={5}
+      bg="white"
+      rounded="md"
+      borderWidth={1}
+      borderColor="gray.200"
+      style={{ transform: 'translateY(-100px)' }}
+    >
+      <Tabs>
+        <TabList px={5}>
+          {tabs.map(tab => (
+            <Tab
+              key={tab}
+              mx={3}
+              px={0}
+              py={3}
+              fontWeight="semibold"
+              color="brand.cadet"
+              borderBottomWidth={1}
+              _active={{ bg: 'transparent' }}
+              _selected={{ color: 'brand.dark', borderColor: 'brand.blue' }}
+            >
+              {tab}
+            </Tab>
+          ))}
+        </TabList>
+
+        <TabPanels px={3} mt={5}>
+          <TabPanel>
+            <AccountSettings />
+          </TabPanel>
+          <TabPanel>
+            <CompanySettings />
+          </TabPanel>
+          <TabPanel>
+            <Notifications />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+
+      <Actions />
+    </Box>
+  )
+}
+
+export default Content

com-dict-client/src/components/ProfileSection/src/components/Content/Notifications.jsx

@@ -0,0 +1,23 @@
+import { FormControl, FormLabel, Switch } from '@chakra-ui/react'
+
+function Notifications() {
+  return (
+    <FormControl
+      display="flex"
+      alignItems="center"
+      justifyContent="space-between"
+    >
+      <FormLabel
+        htmlFor="notificationEmails"
+        mb={0}
+        cursor="pointer"
+        userSelect="none"
+      >
+        Receive notification emails
+      </FormLabel>
+      <Switch id="notificationEmails" />
+    </FormControl>
+  )
+}
+
+export default Notifications

com-dict-client/src/components/ProfileSection/src/components/Cover.jsx

@@ -0,0 +1,91 @@
+import { useRef, useState } from 'react'
+import {
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Image,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useDisclosure,
+} from '@chakra-ui/react'
+
+export default function Cover() {
+  const [coverImage, setCoverImage] = useState(null)
+  const inputRef = useRef(null)
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  const openChooseFile = () => {
+    inputRef.current.click()
+  }
+
+  const handleChangeCover = event => {
+    const ALLOWED_TYPES = ['image/png', 'image/jpeg', 'image/jpg']
+    const selected = event.target.files[0]
+
+    if (selected && ALLOWED_TYPES.includes(selected.type)) {
+      let reader = new FileReader()
+      reader.onloadend = () => setCoverImage(reader.result)
+      return reader.readAsDataURL(selected)
+    }
+
+    onOpen()
+  }
+
+  return (
+    <Box h={60} overflow="hidden">
+      <Image
+        w="full"
+        h="full"
+        objectFit="cover"
+        src={coverImage ? coverImage : '/img/cover.jpg'}
+        alt="Cover"
+      />
+      <Button
+        onClick={openChooseFile}
+        position="absolute"
+        top={4}
+        right={4}
+        variant="ghost"
+      >
+        <svg width="1.2em" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z"
+          />
+        </svg>
+        <Text ml={2}>Change Cover</Text>
+        <input ref={inputRef} type="file" onChange={handleChangeCover} hidden />
+      </Button>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Something went wrong</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Text>File not supported!</Text>
+            <HStack mt={1}>
+              <Text color="brand.cadet" fontSize="sm">
+                Supported types:
+              </Text>
+              <Badge colorScheme="green">PNG</Badge>
+              <Badge colorScheme="green">JPG</Badge>
+              <Badge colorScheme="green">JPEG</Badge>
+            </HStack>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onClick={onClose}>Close</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Box>
+  )
+}

com-dict-client/src/components/ProfileSection/src/components/Main.jsx

@@ -0,0 +1,12 @@
+import { Container } from '@chakra-ui/layout'
+import Content from './Content/Content'
+import Sidebar from './Sidebar/Sidebar'
+
+export default function Main() {
+  return (
+    <Container display={{ base: 'block', md: 'flex' }} maxW="container.xl">
+      <Sidebar />
+      <Content />
+    </Container>
+  )
+}

com-dict-client/src/components/ProfileSection/src/components/Sidebar/Actions.jsx

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react'
+import {
+  Button,
+  Input,
+  InputGroup,
+  InputRightAddon,
+  useClipboard,
+  VStack,
+} from '@chakra-ui/react'
+
+export default function Actions() {
+  const value = 'https://google.com'
+  const { hasCopied, onCopy } = useClipboard(value)
+
+  const profileUrl = useRef(null)
+
+  useEffect(() => {
+    if (hasCopied) {
+      profileUrl.current.focus()
+      profileUrl.current.select()
+    }
+  })
+
+  return (
+    <VStack py={8} px={5} spacing={3}>
+      <Button w="full" variant="outline">
+        View Public Profile
+      </Button>
+      <InputGroup>
+        <Input
+          ref={profileUrl}
+          type="url"
+          color="brand.blue"
+          value={value}
+          userSelect="all"
+          isReadOnly
+          _focus={{ borderColor: 'brand.blue' }}
+        />
+        <InputRightAddon bg="transparent" px={0} overflow="hidden">
+          <Button onClick={onCopy} variant="link">
+            <svg width="1.2em" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+              <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+            </svg>
+          </Button>
+        </InputRightAddon>
+      </InputGroup>
+    </VStack>
+  )
+}