diff --git a/com-dict-client/.env.sample b/com-dict-client/.env.sample deleted file mode 100644 index 50c326a..0000000 --- a/com-dict-client/.env.sample +++ /dev/null @@ -1,4 +0,0 @@ -REACT_APP_FIREBASE_API_KEY = -REACT_APP_FIREBASE_PROJECT_ID = -REACT_APP_FIREBASE_MESSAGING_SENDER_ID = -REACT_APP_FIREBASE_APP_ID = \ No newline at end of file diff --git a/com-dict-client/src/components/Header/index.js b/com-dict-client/src/components/Header/index.js index a4824f0..19bae2e 100644 --- a/com-dict-client/src/components/Header/index.js +++ b/com-dict-client/src/components/Header/index.js @@ -70,7 +70,7 @@ function TitleBar() { key="profile" > - {user.displayName} + {user.displayName} signOut()(firebase, history)}> diff --git a/com-dict-client/src/components/ProfileSection/public/img/cover.jpg b/com-dict-client/src/components/ProfileSection/public/img/cover.jpg new file mode 100644 index 0000000..ce212ac Binary files /dev/null and b/com-dict-client/src/components/ProfileSection/public/img/cover.jpg differ diff --git a/com-dict-client/src/components/ProfileSection/public/img/tim-cook.jpg b/com-dict-client/src/components/ProfileSection/public/img/tim-cook.jpg new file mode 100644 index 0000000..b9145c4 Binary files /dev/null and b/com-dict-client/src/components/ProfileSection/public/img/tim-cook.jpg differ diff --git a/com-dict-client/src/components/ProfileSection/src/components/Content/AccountSettings.jsx b/com-dict-client/src/components/ProfileSection/src/components/Content/AccountSettings.jsx new file mode 100644 index 0000000..3984fca --- /dev/null +++ b/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 ( + + + First Name + + + + Last Name + + + + Phone Number + + + + Email Address + + + + Country + + + + ) +} + +export default AccountSettings diff --git a/com-dict-client/src/components/ProfileSection/src/components/Content/Actions.jsx b/com-dict-client/src/components/ProfileSection/src/components/Content/Actions.jsx new file mode 100644 index 0000000..af5580b --- /dev/null +++ b/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 ( + + + + ) +} + +export default Actions diff --git a/com-dict-client/src/components/ProfileSection/src/components/Content/CompanySettings.jsx b/com-dict-client/src/components/ProfileSection/src/components/Content/CompanySettings.jsx new file mode 100644 index 0000000..76fe4c6 --- /dev/null +++ b/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 ( + + + User ID + + + + + + + + + + + Organisation Name + + + + Email Address + + + + Size + + + + + + + + + + ) +} + +export default CompanySettings diff --git a/com-dict-client/src/components/ProfileSection/src/components/Content/Content.jsx b/com-dict-client/src/components/ProfileSection/src/components/Content/Content.jsx new file mode 100644 index 0000000..07d8c85 --- /dev/null +++ b/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 ( + + + + {tabs.map(tab => ( + + {tab} + + ))} + + + + + + + + + + + + + + + + + + ) +} + +export default Content diff --git a/com-dict-client/src/components/ProfileSection/src/components/Content/Notifications.jsx b/com-dict-client/src/components/ProfileSection/src/components/Content/Notifications.jsx new file mode 100644 index 0000000..7138859 --- /dev/null +++ b/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 ( + + + Receive notification emails + + + + ) +} + +export default Notifications diff --git a/com-dict-client/src/components/ProfileSection/src/components/Cover.jsx b/com-dict-client/src/components/ProfileSection/src/components/Cover.jsx new file mode 100644 index 0000000..2f7796c --- /dev/null +++ b/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 ( + + Cover + + + + + Something went wrong + + + File not supported! + + + Supported types: + + PNG + JPG + JPEG + + + + + + + + + + ) +} diff --git a/com-dict-client/src/components/ProfileSection/src/components/Main.jsx b/com-dict-client/src/components/ProfileSection/src/components/Main.jsx new file mode 100644 index 0000000..93c86dc --- /dev/null +++ b/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 ( + + + + + ) +} diff --git a/com-dict-client/src/components/ProfileSection/src/components/Sidebar/Actions.jsx b/com-dict-client/src/components/ProfileSection/src/components/Sidebar/Actions.jsx new file mode 100644 index 0000000..4dbe07a --- /dev/null +++ b/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 ( + + + + + + + + + + ) +} diff --git a/com-dict-client/src/components/ProfileSection/src/components/Sidebar/Data.jsx b/com-dict-client/src/components/ProfileSection/src/components/Sidebar/Data.jsx new file mode 100644 index 0000000..4a65ac9 --- /dev/null +++ b/com-dict-client/src/components/ProfileSection/src/components/Sidebar/Data.jsx @@ -0,0 +1,50 @@ +import { Box, Text, VStack } from '@chakra-ui/react' + +const list = [ + { + id: 1, + name: 'Added words in a Dictionary', + value: 32, + color: 'green', + }, + { + id: 2, + name: 'Pending words for review', + value: 15, + color: 'yellow', + }, + { + id: 3, + name: 'Overall Ratings', + value: 4.1, + color: 'cadet', + }, +] + +function Data() { + return ( + + {list.map(item => ( + + {item.name} + + {item.value} + + + ))} + + ) +} + +export default Data diff --git a/com-dict-client/src/components/ProfileSection/src/components/Sidebar/Profile.jsx b/com-dict-client/src/components/ProfileSection/src/components/Sidebar/Profile.jsx new file mode 100644 index 0000000..4a5facb --- /dev/null +++ b/com-dict-client/src/components/ProfileSection/src/components/Sidebar/Profile.jsx @@ -0,0 +1,103 @@ +import { useState, useRef } from 'react' +import { + Avatar, + AvatarBadge, + Badge, + Button, + Heading, + HStack, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Text, + useDisclosure, + VStack, +} from '@chakra-ui/react' + +function Profile() { + const [userProfile, setUserProfile] = useState(null) + + const { isOpen, onOpen, onClose } = useDisclosure() + const profileImage = useRef(null) + + const openChooseImage = () => { + profileImage.current.click() + } + + const changeProfileImage = 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 = () => setUserProfile(reader.result) + return reader.readAsDataURL(selected) + } + + onOpen() + } + + return ( + + + + + + + + + + + + + Something went wrong + + + File not supported! + + + Supported types: + + PNG + JPG + JPEG + + + + + + + + + + + Akash Jha + + + Software Developer + + + + ) +} + +export default Profile diff --git a/com-dict-client/src/components/ProfileSection/src/components/Sidebar/Sidebar.jsx b/com-dict-client/src/components/ProfileSection/src/components/Sidebar/Sidebar.jsx new file mode 100644 index 0000000..5a80ed4 --- /dev/null +++ b/com-dict-client/src/components/ProfileSection/src/components/Sidebar/Sidebar.jsx @@ -0,0 +1,27 @@ +import { Box } from '@chakra-ui/react' + +import Actions from './Actions' +import Data from './Data' +import Profile from './Profile' + +function Sidebar() { + return ( + + + + + + ) +} + +export default Sidebar diff --git a/com-dict-client/src/components/ProfileSection/src/container/App.js b/com-dict-client/src/components/ProfileSection/src/container/App.js new file mode 100644 index 0000000..2eb8103 --- /dev/null +++ b/com-dict-client/src/components/ProfileSection/src/container/App.js @@ -0,0 +1,23 @@ +import SimpleBar from 'simplebar-react' +import { BrowserRouter as Router, Switch, Route } from 'react-router-dom' +import { ChakraProvider } from '@chakra-ui/react' +import { theme } from 'helpers' +import Cover from 'components/Cover' +import Main from 'components/Main' + +export default function App() { + return ( + + + + + + +
+ + + + + + ) +} diff --git a/com-dict-client/src/components/ProfileSection/src/helpers/index.js b/com-dict-client/src/components/ProfileSection/src/helpers/index.js new file mode 100644 index 0000000..1fdfd3f --- /dev/null +++ b/com-dict-client/src/components/ProfileSection/src/helpers/index.js @@ -0,0 +1,66 @@ +import { extendTheme } from '@chakra-ui/react' + +export const theme = extendTheme({ + colors: { + brand: { + blue: '#4164e3', + cadet: '#8998a8', + dark: '#243156', + gray: '#a0acb9', + green: '#36c537', + light: '#e9ebee', + pure: '#fafafb', + slate: '#77889a', + white: '#fcfdfe', + yellow: '#ed9b13', + }, + }, + components: { + Button: { + variants: { + solid: { + p: '6', + color: 'white', + bg: 'brand.blue', + _hover: { bg: 'brand.blue' }, + _active: { bg: 'brand.blue' }, + _focus: { boxShadow: 'none' }, + }, + outline: { + bg: 'transparent', + borderWidth: '1px', + color: 'brand.cadet', + borderColor: 'brand.light', + _hover: { bg: 'brand.white' }, + _active: { bg: 'brand.light' }, + _focus: { boxShadow: 'none' }, + }, + ghost: { + color: 'white', + bg: 'rgba(0, 0, 0, 0.25)', + _hover: { bg: 'rgba(0, 0, 0, 0.25)' }, + _active: { bg: 'rgba(0, 0, 0, 0.35)' }, + _focus: { boxShadow: 'none' }, + }, + link: { + p: '0', + height: 'full', + bg: 'transparent', + color: 'gray.500', + rounded: 'none', + _active: { bg: 'brand.light' }, + _focus: { boxShadow: 'none' }, + }, + }, + }, + Tabs: { + baseStyle: { + tab: { + _focus: { + boxShadow: 'none', + }, + }, + }, + }, + }, +}) diff --git a/com-dict-client/src/components/ProfileSection/src/index.js b/com-dict-client/src/components/ProfileSection/src/index.js new file mode 100644 index 0000000..78463d9 --- /dev/null +++ b/com-dict-client/src/components/ProfileSection/src/index.js @@ -0,0 +1,7 @@ +import { render } from 'react-dom' +import App from 'container/App' + +import 'simplebar/dist/simplebar.min.css' +import 'styles/index.css' + +render(, document.getElementById('app')) diff --git a/com-dict-client/src/components/ProfileSection/src/styles/index.css b/com-dict-client/src/components/ProfileSection/src/styles/index.css new file mode 100644 index 0000000..b09bb85 --- /dev/null +++ b/com-dict-client/src/components/ProfileSection/src/styles/index.css @@ -0,0 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); + +* { + font-family: 'Inter' !important; +} diff --git a/com-dict-client/src/routes.js b/com-dict-client/src/routes.js index 10a0924..f5ea9cc 100644 --- a/com-dict-client/src/routes.js +++ b/com-dict-client/src/routes.js @@ -10,7 +10,9 @@ import Categories from "./containers/categories/categories"; import CommentWord from "./containers/comment/comment"; import Report from "./containers/reportWord/reportWord"; import Search from "./containers/search/search"; +import Profile from "./components/ProfileSection/src/components/Main" import { useSelector } from "react-redux"; +// import Profile from "./components/ProfileSection/src/components/Sidebar"; // import { auth } from "./config"; export default function Routes() { @@ -21,6 +23,7 @@ export default function Routes() { +