starting to create header and adding fw icons

lucasheartcliff · Oct 26, 2022 · 10d3111 · 10d3111
1 parent 65c97fc
commit 10d3111
Show file tree

Hide file tree

Showing 17 changed files with 404 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -14,9 +14,9 @@
     "@svgr/webpack": "4.3.3",
     "@types/jest": "^26.0.14",
     "@types/node": "^14.11.10",
-    "@types/react": "^16.9.53",
+    "@types/react": "^18.0.23",
     "@types/react-custom-scrollbars": "^4.0.7",
-    "@types/react-dom": "^16.9.8",
+    "@types/react-dom": "^18.0.7",
     "@types/react-router-dom": "^5.1.6",
     "@types/styled-components": "^5.1.4",
     "@typescript-eslint/eslint-plugin": "^2.10.0",

diff --git a/public/index.html b/public/index.html
@@ -11,7 +11,14 @@
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
       rel="stylesheet"
     />
-   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link
+      rel="stylesheet"
+      href="//use.fontawesome.com/releases/v5.0.7/css/all.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    />
     <title>Portfolio</title>
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,9 @@
 import Switch from "antd/lib/switch";
 import React, { useEffect } from "react";
+import BaseLayout from "./components/BaseLayout/BaseLayout";
 
 import LanguageChart from "./components/LanguageChart";
-import Logo from "./logo";
+import Logo from "./components/logo";
 import { CACHE_TIME, useGetRequest } from "./services";
 import { useTheme } from "./style/themes/use-theme";
 import { WAKATIME_LANGUAGES } from "./utils/url";
@@ -16,9 +17,13 @@ const App: React.FC = () => {
   return (
     <>
       <div className="container">
-        <Switch checked={darkMode} onChange={setDarkMode} />
-        <Logo title={"LucasHeartcliff"} onClick={() => null} />
-        {status === "success" ? <LanguageChart data={data} /> : null}
+        <BaseLayout>
+          <>
+            <Switch checked={darkMode} onChange={setDarkMode} />
+            <Logo title={"LucasHeartcliff"} onClick={() => null} />
+            {status === "success" ? <LanguageChart data={data} /> : null}
+          </>
+        </BaseLayout>
       </div>
     </>
   );

diff --git a/src/components/ActionMenu/ActionMenu.tsx b/src/components/ActionMenu/ActionMenu.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { CopyOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import { Menu } from 'antd';
+
+interface Props {
+  clone?: () => void;
+  remove: () => void;
+}
+const ActionsMenu: React.FC<Props> = ({ clone, remove }) => {
+  return (
+    <Menu>
+      {clone && (
+        <Menu.Item key="0" onClick={clone}>
+          <CopyOutlined />
+          {' Clonar'}
+        </Menu.Item>
+      )}
+
+      <Menu.Item key="1" onClick={remove}>
+        <MinusCircleOutlined />
+        {' Remover'}
+      </Menu.Item>
+    </Menu>
+  );
+};
+export default ActionsMenu;
diff --git a/src/components/BaseEntityModal/BaseEntityModal.tsx b/src/components/BaseEntityModal/BaseEntityModal.tsx
@@ -0,0 +1,65 @@
+import React, { ReactElement } from 'react';
+
+import { Button, Spin } from 'antd';
+import { Form } from 'antd';
+import { FormInstance } from 'antd/lib/form';
+import { Store } from 'antd/lib/form/interface';
+import Modal, { ModalProps } from 'antd/lib/modal/Modal';
+import { CSSObject } from 'styled-components';
+
+interface Props<T = any> extends ModalProps {
+  entity?: any;
+  visible: boolean;
+  entityName: string;
+  form: FormInstance<T>;
+  width?: number;
+  loading?: boolean;
+  hideModal: () => void;
+  onSubmit: (form: FormInstance) => void;
+  children?: any;
+  style?: CSSObject;
+}
+const BaseEntityModal = <T extends any>({
+  entity,
+  width,
+  entityName,
+  onSubmit,
+  visible,
+  children,
+  hideModal,
+  loading,
+  form,
+  style,
+  ...props
+}: Props<T>) => {
+  return (
+    <Modal
+      {...props}
+      visible={visible}
+      width={width || 800}
+      destroyOnClose
+      title={!entity ? `Criar ${entityName}` : `Editar ${entityName}`}
+      style={style}
+      maskClosable={false}
+      onCancel={hideModal}
+      footer={[
+        <Button
+          key="submit"
+          type="primary"
+          htmlType={'submit'}
+          onClick={() => onSubmit(form)}
+        >
+          {'Salvar'}
+        </Button>,
+      ]}
+    >
+      <Spin spinning={!!loading}>
+        <Form initialValues={entity as Store} layout={'vertical'} form={form}>
+          {children}
+        </Form>
+      </Spin>
+    </Modal>
+  );
+};
+
+export default BaseEntityModal;
diff --git a/src/components/BaseLayout/BaseLayout.tsx b/src/components/BaseLayout/BaseLayout.tsx
@@ -0,0 +1,73 @@
+import {
+  CaretDownOutlined,
+  MenuOutlined,
+  UserOutlined,
+} from "@ant-design/icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Layout, Menu } from "antd";
+import { MenuItemProps } from "antd/lib/menu/MenuItem";
+import React, { FC, ReactElement, useContext, useState } from "react";
+import Logo from "../logo";
+
+import { Container, Content, Header, UserContainer } from "./styled";
+
+const { SubMenu } = Menu;
+const { Sider } = Layout;
+
+const UserTitle: React.FC<{ title: string }> = ({ title }) => {
+  return (
+    <UserContainer>
+      <UserOutlined />
+      {title}
+      <CaretDownOutlined style={{ fontSize: 10 }} />
+    </UserContainer>
+  );
+};
+
+interface Props {
+  children?: ReactElement;
+}
+
+const BaseLayout: FC<Props> = ({ children }) => {
+  const [collapsed, setCollapsed] = useState(false);
+  const toogleCollapse = () => {
+    setCollapsed(!collapsed);
+  };
+
+  const LOGO_NAME = "LucasHeartcliff";
+
+  // const onSelectRoute = (path: string) => {
+  //   history.push(path);
+  // };
+
+  const renderMenuItem = (props: MenuItemProps) => {
+    return <Menu.Item {...props}>{props.title}</Menu.Item>;
+  };
+  const headerOptions = [
+    {
+      label: "Skills",
+      key: "skills",
+    },
+  ];
+
+  return (
+    <Container>
+      <FontAwesomeIcon icon={["far", "moon"]} />
+      <Header>
+        <Logo title={LOGO_NAME} />
+        <Menu mode="horizontal">
+          {headerOptions.map((header) => (
+            <Menu.Item key={header.key}>{header.label}</Menu.Item>
+          ))}
+
+          <Menu.Item onClick={undefined}>
+            <i className={"far fa-moon"} />
+          </Menu.Item>
+        </Menu>
+      </Header>
+      <Content>{children}</Content>
+    </Container>
+  );
+};
+
+export default BaseLayout;
diff --git a/src/components/BaseLayout/styled.ts b/src/components/BaseLayout/styled.ts
@@ -0,0 +1,50 @@
+import { Layout, Menu } from "antd";
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  background: #ddd;
+`;
+
+export const Header = styled(Layout.Header)`
+  padding: 0 10px;
+  background: #fff;
+  position: fixed;
+  right: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  transition: all 0.2s ease-in-out;
+
+  &.ant-layout-header {
+    padding: 0 10px;
+  }
+
+  ul.ant-menu {
+    border: 0;
+    line-height: 46px;
+  }
+`;
+
+export const UserContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  span {
+    margin: 0 5px;
+  }
+`;
+
+export const Content = styled(Layout.Content)`
+  margin-top: 64px;
+  height: calc(100vh - 64px);
+  padding: 10px;
+  transition: all 0.2s ease-in-out;
+  width: 100vw;
+`;
diff --git a/src/components/Card/styled.ts b/src/components/Card/styled.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Container = styled.div<{ width?: string; height?: string }>`
+  width: ${({ width }) => width || '275px'};
+  height: ${({ height }) => height || '150px'};
+  flex: 1;
+  margin: 0 10px 5px 10px;
+  background: #fff;
+  /* overflow: hidden; */
+  box-shadow: 0px 1px 22px -12px #333;
+`;
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { LoadingOutlined } from '@ant-design/icons';
+import { Spin } from 'antd';
+import { SpinProps } from 'antd/lib/spin';
+
+import * as S from './styled';
+
+interface Props extends SpinProps {}
+
+const Loading: React.FC<Props> = props => {
+  const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
+
+  return (
+    <S.Container>
+      <Spin indicator={antIcon} {...props} />
+    </S.Container>
+  );
+};
+
+export default Loading;
diff --git a/src/components/Loading/styled.ts b/src/components/Loading/styled.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+`;
diff --git a/src/components/Scroll/Scroll.tsx b/src/components/Scroll/Scroll.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import Scrollbars, { ScrollbarProps } from 'react-custom-scrollbars';
+
+interface Props extends ScrollbarProps {}
+
+const Scroll: React.FC<Props> = ({ children, ...props }) => {
+  return <Scrollbars {...props}>{children}</Scrollbars>;
+};
+
+export default Scroll;
diff --git a/src/components/SelectOptions/DocumentOption.tsx b/src/components/SelectOptions/DocumentOption.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import * as S from './styled';
+
+interface Props {
+  id: number;
+  document: string;
+  args?: { label: string; value: any }[];
+}
+
+const DocumentOption: React.FC<Props> = ({ id, document, args = [] }) => (
+  <S.Container key={id}>
+    <S.Row>
+      <S.Title>{'N° do Documento: '}</S.Title>
+      <S.Value style={{ marginLeft: 5 }}>{document}</S.Value>
+    </S.Row>
+    <S.Row>
+      {args.map(({ label, value }) => (
+        <S.ArgumentContainer>
+          <S.Row>
+            <S.Title>{label}</S.Title>
+          </S.Row>
+          <S.Row>
+            <S.Value>{value}</S.Value>
+          </S.Row>
+        </S.ArgumentContainer>
+      ))}
+    </S.Row>
+  </S.Container>
+);
+
+export default DocumentOption;
diff --git a/src/components/SelectOptions/styled.ts b/src/components/SelectOptions/styled.ts
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 75px;
+`;
+
+export const Row = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+export const Title = styled.div`
+  font-size: 12px;
+  font-weight: 500;
+  color: #989898;
+`;
+
+export const Value = styled.div`
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const ArgumentContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;