📁 Changed TDrive root folder (#16)

📁 Changed TDrive root folder

tdrive/frontend/src/app/components/banner/banner.scss

@@ -0,0 +1,43 @@
+
+
+.ant-layout-header.banner-container {
+  padding: 0 16px;
+
+  &.primary {
+    background-color: var(--primary);
+    color: var(--white);
+  }
+
+  &.secondary {
+    background-color: var(--secondary);
+    color: var(--white);
+    border-bottom: 1px solid var(--black);
+  }
+
+  &.default {
+    background-color: var(--primary-background);
+    color: var(--black);
+  }
+
+  &.warning {
+    background-color: var(--warning);
+    color: var(--white);
+  }
+  &.important {
+    background-color: var(--red);
+    color: var(--white);
+  }
+
+  &.ghost {
+    background-color: transparent;
+    color: var(--black);
+  }
+
+  .banner-col-icon {
+    display: flex;
+    align-items: center;
+    .icon {
+      cursor: pointer;
+    }
+  }
+}

tdrive/frontend/src/app/components/banner/banner.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { FC } from 'react';
+import { Col, Layout, Row } from 'antd';
+import './banner.scss';
+import { X } from 'react-feather';
+import { CSSProperties } from '@material-ui/styles';
+
+type PropsType = {
+  closable?: boolean;
+  content?: string | JSX.Element;
+  onClose?: () => any;
+  height?: string | number;
+  type: 'primary' | 'secondary' | 'default' | 'warning' | 'important' | 'ghost';
+  style?: CSSProperties;
+  contentColumnStyle?: CSSProperties;
+  className?: string;
+  children?: JSX.Element | JSX.Element[];
+};
+
+const Banner: FC<PropsType> = ({
+  closable,
+  content,
+  onClose,
+  height,
+  type,
+  children,
+  style,
+  contentColumnStyle,
+  className,
+}) => {
+  const headerStyle = {
+    height: height ? height : 68,
+    lineHeight: height ? `${height}px` : '68px',
+    ...style,
+  };
+
+  return (
+    <Layout.Header className={`banner-container ${type} ${className || ''}`} style={headerStyle}>
+      <Row align="middle" justify="space-between" gutter={[0, 0]} style={headerStyle}>
+        <Col /* ghost column */></Col>
+        <Col style={contentColumnStyle}>{content || children || ''}</Col>
+        <Col className="banner-col-icon">
+          {closable && <X size={16} className="icon" onClick={onClose} />}
+        </Col>
+      </Row>
+    </Layout.Header>
+  );
+};
+
+export default Banner;