From 6af42870e96badb98f0a93b12c7251f946a4845b Mon Sep 17 00:00:00 2001 From: sirlolcat Date: Tue, 7 Jun 2022 22:14:07 +0430 Subject: [PATCH] feat: add everything --- react-typescript/public/seeding.png | Bin 0 -> 3711 bytes react-typescript/src/components/App.css | 39 ----- react-typescript/src/components/App.tsx | 8 +- react-typescript/src/components/Button.tsx | 19 --- react-typescript/src/components/Conjured.tsx | 18 +++ react-typescript/src/components/Header.tsx | 34 +++++ .../src/components/ItemsSection.tsx | 11 +- .../src/components/ItemsTable.tsx | 138 ++++++++---------- react-typescript/src/components/Quality.tsx | 28 ++++ react-typescript/src/components/SellIn.tsx | 19 +++ .../src/components/TableHeader.tsx | 71 +++++++++ .../components/style/ButtonSectionStyle.ts | 8 - .../src/components/style/ButtonStyle.ts | 8 - .../src/components/style/GlobalStyle.ts | 24 --- .../src/components/style/ItemsStyle.ts | 26 ---- .../src/components/style/index.ts | 13 -- .../src/hooks/useTableController.ts | 33 +++-- react-typescript/src/types/index.ts | 2 +- 18 files changed, 269 insertions(+), 230 deletions(-) create mode 100644 react-typescript/public/seeding.png delete mode 100644 react-typescript/src/components/App.css delete mode 100644 react-typescript/src/components/Button.tsx create mode 100644 react-typescript/src/components/Conjured.tsx create mode 100644 react-typescript/src/components/Header.tsx create mode 100644 react-typescript/src/components/Quality.tsx create mode 100644 react-typescript/src/components/SellIn.tsx create mode 100644 react-typescript/src/components/TableHeader.tsx delete mode 100644 react-typescript/src/components/style/ButtonSectionStyle.ts delete mode 100644 react-typescript/src/components/style/ButtonStyle.ts delete mode 100644 react-typescript/src/components/style/GlobalStyle.ts delete mode 100644 react-typescript/src/components/style/ItemsStyle.ts delete mode 100644 react-typescript/src/components/style/index.ts diff --git a/react-typescript/public/seeding.png b/react-typescript/public/seeding.png new file mode 100644 index 0000000000000000000000000000000000000000..cc8aac7edc7f7fbecf6a4e040de4b9c32a9adf46 GIT binary patch literal 3711 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 literal 0 HcmV?d00001 diff --git a/react-typescript/src/components/App.css b/react-typescript/src/components/App.css deleted file mode 100644 index 29a62cba..00000000 --- a/react-typescript/src/components/App.css +++ /dev/null @@ -1,39 +0,0 @@ -.App { - text-align: center; - height: 50vh; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/react-typescript/src/components/App.tsx b/react-typescript/src/components/App.tsx index a1fe4162..bdb1c157 100644 --- a/react-typescript/src/components/App.tsx +++ b/react-typescript/src/components/App.tsx @@ -1,5 +1,6 @@ import { createGlobalStyle } from 'styled-components'; import ItemsSection from './ItemsSection'; +import Header from './Header'; function App(): JSX.Element { @@ -9,15 +10,14 @@ function App(): JSX.Element { padding: 0; } html, body { + @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500&family=Ubuntu:wght@300;400;500;700&display=swap'); + font-family: 'Roboto', sans-serif; background-color: RGB(255, 255, 253); color: RGB(227, 226, 215); width: 100%; height: 100%; } body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -26,7 +26,7 @@ function App(): JSX.Element { return (
- {/*
*/} +
); diff --git a/react-typescript/src/components/Button.tsx b/react-typescript/src/components/Button.tsx deleted file mode 100644 index 2ae9ebea..00000000 --- a/react-typescript/src/components/Button.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { motion } from 'framer-motion'; -import useDayLoader from '../hooks/useDayLoader'; -import styled from 'styled-components'; - -//TODO: define styled components here - -function Button() { - const Button = styled(motion.button)` - border: none; - - ` - - const { loadNextDay } = useDayLoader(); - return ( - - ); -} - -export default Button; diff --git a/react-typescript/src/components/Conjured.tsx b/react-typescript/src/components/Conjured.tsx new file mode 100644 index 00000000..b3290c6f --- /dev/null +++ b/react-typescript/src/components/Conjured.tsx @@ -0,0 +1,18 @@ +import styled from "styled-components"; +import {motion} from 'framer-motion'; + +function Conjured(value: boolean, index: number): JSX.Element { + const Conjured = styled(motion.span)` + role: 'region'; +`; + + return ( + + {value ? "✅" : "❌"} + + ); +} + +export default Conjured; \ No newline at end of file diff --git a/react-typescript/src/components/Header.tsx b/react-typescript/src/components/Header.tsx new file mode 100644 index 00000000..2ee3a8c0 --- /dev/null +++ b/react-typescript/src/components/Header.tsx @@ -0,0 +1,34 @@ +import styled from 'styled-components'; + +function Header(): JSX.Element { + const Nav = styled.nav` + display: flex; + flex-flow: column wrap; + justify-content: center; + font-size: 1rem; + align-items: center; + height: 10vh; + border-bottom: 1px solid RGB(12, 16, 36); + margin-bottom: 2rem; + span { + font-size: 1.5rem; + font-weight: 700; + font-family: 'Ubuntu', sans-serif; + color: RGB(12, 16, 36); + } + img { + height: 2.5rem; + width: 2.5rem; + } + ` + return ( + + ); +} + +export default Header; diff --git a/react-typescript/src/components/ItemsSection.tsx b/react-typescript/src/components/ItemsSection.tsx index 1dfbb2fd..a57c8292 100644 --- a/react-typescript/src/components/ItemsSection.tsx +++ b/react-typescript/src/components/ItemsSection.tsx @@ -1,24 +1,27 @@ import styled from "styled-components"; import ItemsTable from './ItemsTable'; -import Button from './Button'; import useTableController from "../hooks/useTableController"; +import TableHeader from "./TableHeader"; function ItemsSection(): JSX.Element { const ItemsSection = styled.section` - height: 100vh; display: flex; + height: 80vh; flex-flow: column wrap; - justify-content: center; + justify-content: flex-start; margin: 0 5%; + border: 1px solid RGB(12, 16, 36); + border-radius: 10px; role: 'region'; + text-align: left; `; const { columns, data } = useTableController(); return ( + - + + ); +} + +export default TableHeader; diff --git a/react-typescript/src/components/style/ButtonSectionStyle.ts b/react-typescript/src/components/style/ButtonSectionStyle.ts deleted file mode 100644 index 2a8160d6..00000000 --- a/react-typescript/src/components/style/ButtonSectionStyle.ts +++ /dev/null @@ -1,8 +0,0 @@ -import styled from 'styled-components'; - -const ButtonSectionStyle = styled.section` - width: 100%; - height: 20%; -` - -export default ButtonSectionStyle; \ No newline at end of file diff --git a/react-typescript/src/components/style/ButtonStyle.ts b/react-typescript/src/components/style/ButtonStyle.ts deleted file mode 100644 index 4672e2a4..00000000 --- a/react-typescript/src/components/style/ButtonStyle.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { css } from 'styled-components'; - -const ButtonStyle = css` - width: 1%; - height: 2%; -` - -export default ButtonStyle; \ No newline at end of file diff --git a/react-typescript/src/components/style/GlobalStyle.ts b/react-typescript/src/components/style/GlobalStyle.ts deleted file mode 100644 index 0ccea17c..00000000 --- a/react-typescript/src/components/style/GlobalStyle.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { createGlobalStyle } from "styled-components"; - -const GlobalStyle = createGlobalStyle` - * { - margin: 0; - padding: 0; - } - html, body { - background-color: RGB(132, 151, 149); - color: RGB(227, 226, 215); - width: 100%; - height: 100%; - } - body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; - text-align: center; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } -` - -export default GlobalStyle; \ No newline at end of file diff --git a/react-typescript/src/components/style/ItemsStyle.ts b/react-typescript/src/components/style/ItemsStyle.ts deleted file mode 100644 index 3f7227f1..00000000 --- a/react-typescript/src/components/style/ItemsStyle.ts +++ /dev/null @@ -1,26 +0,0 @@ -import styled from "styled-components"; - -const ItemsStyle = styled.div` - height: 85vh; - ul { - display: flex; - flex-direction: row; - flex-wrap: wrap; - width: 100%; - height: 100%; - color: white; - justify-content: center; - align-items: center; - } - li { - list-style: none; - display: inline-block; - height: 10%; - width: 40%; - border: 1px solid white; - margin: 3% 3%; - } -`; - -export default ItemsStyle; - diff --git a/react-typescript/src/components/style/index.ts b/react-typescript/src/components/style/index.ts deleted file mode 100644 index d49cca76..00000000 --- a/react-typescript/src/components/style/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import ButtonSectionStyle from './ButtonSectionStyle'; -import ButtonStyle from './ButtonStyle'; -import GlobalStyle from './GlobalStyle'; -import ItemsStyle from './ItemsStyle'; - -const styles = { - ButtonSectionStyle, - ButtonStyle, - GlobalStyle, - ItemsStyle -} - -export default styles; \ No newline at end of file diff --git a/react-typescript/src/hooks/useTableController.ts b/react-typescript/src/hooks/useTableController.ts index 50e8185c..5bb8f5aa 100644 --- a/react-typescript/src/hooks/useTableController.ts +++ b/react-typescript/src/hooks/useTableController.ts @@ -1,6 +1,9 @@ import { useMemo } from "react"; import { useStore } from "../model"; import { TTable } from "../types"; +import Conjured from "../components/Conjured"; +import Quality from "../components/Quality"; +import SellIn from "../components/SellIn"; function useTableController(): TTable { const { state } = useStore(); @@ -8,28 +11,38 @@ function useTableController(): TTable { const data = useMemo(() => items, [items]); const columns = useMemo(() => [ - { - Header: "Items", - columns: [ { Header: 'Name', accessor: 'name', + }, { Header: 'Conjured', accessor: 'isConjured', - Cell: ({ cell: { value } }: any) => { return value ? 'Yes' : 'No' }, + Cell: ({ cell: { value }, index}: any) => ( + { + ...Conjured(value, index), + } + ), }, { Header: 'Quality', - accessor: 'quality' + accessor: 'quality', + Cell: ({ cell: { value }, index}: any) => ( + { + ...Quality(value, index), + } + ), }, { - Header: 'Days Left', - accessor: 'sellIn' - } - ], - }, + Header: 'Remaining Days', + accessor: 'sellIn', + Cell: ({ cell: { value }, index}: any) => ( + { + ...SellIn(value, index), + } + ), + }, ], []); return { diff --git a/react-typescript/src/types/index.ts b/react-typescript/src/types/index.ts index aa5d9781..1e603561 100644 --- a/react-typescript/src/types/index.ts +++ b/react-typescript/src/types/index.ts @@ -4,7 +4,7 @@ type TItem = { name: string, sellIn: number, quality: number, - isConjured: boolean + isConjured: boolean, } type TProps = {