commit 2380af1cb41dc35dac6848cbcf0dc3aa417f7e43 Author: developomp Date: Sun Aug 15 21:24:15 2021 +0900 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0c43a1c --- /dev/null +++ b/.gitignore @@ -0,0 +1,21 @@ +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..9a5e038 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "semi": false, + "useTabs": true, + "tabWidth": 4 +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..a881215 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,8 @@ +{ + "editor.formatOnPaste": true, + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.insertSpaces": false, + "editor.detectIndentation": false, + "cSpell.words": ["Sider"] +} diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..c160e3d --- /dev/null +++ b/LICENSE @@ -0,0 +1,19 @@ +Copyright (c) 2021 developomp + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. +IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, +DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR +OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE +OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..5056fa9 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# llama-bot-web-interface diff --git a/package.json b/package.json new file mode 100644 index 0000000..c28265a --- /dev/null +++ b/package.json @@ -0,0 +1,52 @@ +{ + "name": "llama-bot-web-interface", + "version": "1.0.0", + "private": true, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "analyze": "source-map-explorer 'build/static/js/*.js'" + }, + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^1.2.36", + "@fortawesome/free-brands-svg-icons": "^5.15.4", + "@fortawesome/react-fontawesome": "^0.1.15", + "antd": "^4.16.11", + "local-storage-fallback": "^4.1.2", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "styled-components": "^5.3.0", + "typescript": "^4.1.2" + }, + "devDependencies": { + "@testing-library/jest-dom": "^5.11.4", + "@testing-library/react": "^11.1.0", + "@testing-library/user-event": "^12.1.10", + "@types/jest": "^26.0.15", + "@types/node": "^12.0.0", + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "@types/styled-components": "^5.1.12", + "react-scripts": "4.0.3", + "source-map-explorer": "^2.5.2" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..07b3433 --- /dev/null +++ b/public/index.html @@ -0,0 +1,24 @@ + + + + + + + + + + + + + Llama Bot + + + +
+ + diff --git a/public/llama-color.png b/public/llama-color.png new file mode 100644 index 0000000..e9fb973 Binary files /dev/null and b/public/llama-color.png differ diff --git a/public/llama.png b/public/llama.png new file mode 100644 index 0000000..d4f5048 Binary files /dev/null and b/public/llama.png differ diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..eb05362 --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..857f8bd --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,77 @@ +import React from "react" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { faGithub } from "@fortawesome/free-brands-svg-icons" +import styled from "styled-components" + +import { Layout } from "antd" + +import theming from "../theming" + +const StyledFooter = styled(Layout.Footer)` + text-align: center; + + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "black", + dark: "white", + })}; + + background-color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "white", + dark: "black", + })}; +` + +const StyledFooterContainer = styled.div` + display: flex; + justify-content: space-between; + + padding: 0 1rem 0 1rem; + width: 100%; + text-align: center; + + max-width: ${theming.size.screen_size2}; + + .logo { + color: gray; + } +` + +const GithubLink = styled.a` + font-size: 2rem; + + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: "lightgrey", + dark: "grey", + })}; + + &:hover { + color: ${(props) => + theming.theme(props.theme.currentTheme, { + light: theming.light.color0, + dark: theming.dark.color0, + })}; + } +` + +export default class Footer extends React.Component { + render() { + return ( + + +
+ Created by developomp +
+ + + + + + ) + } +} diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..f96f66e --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,51 @@ +import { useContext } from "react" + +import { Col, Layout, Menu, Row } from "antd" +import { HomeOutlined } from "@ant-design/icons" + +import { SidebarCollapsedContext } from "../contexts" + +const { Header } = Layout + +const Navbar = () => { + const { isSidebarCollapsed, setSidebarCollapsed } = useContext( + SidebarCollapsedContext + ) + + return ( +
+ + { + setSidebarCollapsed( + (prevIsCollapsed) => !prevIsCollapsed + ) + }} + > + {isSidebarCollapsed ? ">" : "<"} + + + llama logo + + + + }>Home + Documentation + Status + + + Login Button + +
+ ) +} + +export default Navbar diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx new file mode 100644 index 0000000..9b37b48 --- /dev/null +++ b/src/components/Sidebar.tsx @@ -0,0 +1,40 @@ +import { Layout, Menu } from "antd" +import { + UserOutlined, + VideoCameraOutlined, + UploadOutlined, +} from "@ant-design/icons" + +import { SidebarCollapsedContext } from "../contexts" + +const Sidebar = () => { + return ( + + {({ isSidebarCollapsed }) => ( + + + }> + nav 1 + + }> + nav 2 + + }> + nav 3 + + + + )} + + ) +} + +export default Sidebar diff --git a/src/contexts.ts b/src/contexts.ts new file mode 100644 index 0000000..b952d65 --- /dev/null +++ b/src/contexts.ts @@ -0,0 +1,8 @@ +import { createContext, Dispatch, SetStateAction } from "react" + +const SidebarCollapsedContext = createContext({ + isSidebarCollapsed: false, + setSidebarCollapsed: (() => {}) as Dispatch>, +}) + +export { SidebarCollapsedContext } diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..aa5363b --- /dev/null +++ b/src/index.css @@ -0,0 +1,47 @@ +body { + margin: 0; + font-family: "Noto Sans KR", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: "Source Code Pro", monospace; +} + +.site-layout-content { + min-height: 280px; + padding: 24px; + background: #fff; +} + +#components-layout-demo-top .logo { + float: left; + width: 120px; + height: 31px; + margin: 16px 24px 16px 0; + background: rgba(255, 255, 255, 0.3); +} + +.ant-row-rtl #components-layout-demo-top .logo { + float: right; + margin: 16px 0 16px 24px; +} + +.trigger { + padding: 0 24px; + font-size: 18px; + line-height: 64px; + cursor: pointer; + transition: color 0.3s; +} + +.trigger:hover { + color: #1890ff; +} + +.logo { + height: 32px; + margin: 16px; + background: rgba(255, 255, 255, 0.3); +} diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..bf67610 --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,77 @@ +import React, { useEffect, useState } from "react" +import ReactDOM from "react-dom" + +import { ThemeProvider } from "styled-components" +import storage from "local-storage-fallback" + +import Navbar from "./components/Navbar" +import Sidebar from "./components/Sidebar" +import Footer from "./components/Footer" +import { Layout } from "antd" + +import { SidebarCollapsedContext } from "./contexts" + +import "antd/dist/antd.min.css" +import "./index.css" // must be loaded last + +const App = () => { + const [currentTheme, setCurrentTheme] = useState("light") + const [isSidebarCollapsed, setSidebarCollapsed] = useState(false) + + useEffect(() => { + // save theme when it is changed + storage.setItem("theme", currentTheme) + }, [currentTheme]) + + return ( + <> + + setCurrentTheme(setThemeTo), + }} + > + + + + + + + +
+

Dashboard

+ Content +
+ + +