Upload sample project

2026-09-22 20:01:59 +00:00 · 2023-11-13 17:56:15 +07:00
parent 8969e659b2
commit 545e7b23ff
32 changed files with 8113 additions and 0 deletions
@@ -0,0 +1,27 @@
+import { Outlet } from "react-router-dom";
+import styled from "styled-components";
+
+const Main = styled.main`
+  background-color: var(--color-grey-50);
+  padding: 4rem 4.8rem 6.4rem;
+`;
+
+const Container = styled.div`
+  max-width: 120rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 3.2rem;
+`;
+
+function AppLayout() {
+  return (
+    <Main>
+      <Container>
+        <Outlet />
+      </Container>
+    </Main>
+  );
+}
+
+export default AppLayout;
@@ -0,0 +1,65 @@
+import styled, { css } from "styled-components";
+
+const sizes = {
+  small: css`
+    font-size: 1.2rem;
+    padding: 0.4rem 0.8rem;
+    text-transform: uppercase;
+    font-weight: 600;
+    text-align: center;
+  `,
+  medium: css`
+    font-size: 1.4rem;
+    padding: 1.2rem 1.6rem;
+    font-weight: 500;
+  `,
+  large: css`
+    font-size: 1.6rem;
+    padding: 1.2rem 2.4rem;
+    font-weight: 500;
+  `,
+};
+
+const variations = {
+  primary: css`
+    color: var(--color-brand-50);
+    background-color: var(--color-brand-600);
+
+    &:hover {
+      background-color: var(--color-brand-700);
+    }
+  `,
+  secondary: css`
+    color: var(--color-grey-600);
+    background: var(--color-grey-0);
+    border: 1px solid var(--color-grey-200);
+
+    &:hover {
+      background-color: var(--color-grey-50);
+    }
+  `,
+  danger: css`
+    color: var(--color-red-100);
+    background-color: var(--color-red-700);
+
+    &:hover {
+      background-color: var(--color-red-800);
+    }
+  `,
+};
+
+const Button = styled.button`
+  border: none;
+  border-radius: var(--border-radius-sm);
+  box-shadow: var(--shadow-sm);
+
+  ${(props) => sizes[props.size]}
+  ${(props) => variations[props.variation]}
+`;
+
+Button.defaultProps = {
+  variation: "primary",
+  size: "medium",
+};
+
+export default Button;
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+const FileInput = styled.input.attrs({type: 'file'})`
+  font-size: 1.4rem;
+  border-radius: var(--border-radius-sm);
+
+  &::file-selector-button {
+    font: inherit;
+    font-weight: 500;
+    padding: 0.8rem 1.2rem;
+    margin-right: 1.2rem;
+    border-radius: var(--border-radius-sm);
+    border: none;
+    color: var(--color-brand-50);
+    background-color: var(--color-brand-600);
+    cursor: pointer;
+    transition: color 0.2s, background-color 0.2s;
+
+    &:hover {
+      background-color: var(--color-brand-700);
+    }
+  }
+`;
+
+export default FileInput;
@@ -0,0 +1,25 @@
+import styled, { css } from "styled-components";
+
+const Form = styled.form`
+  ${(props) =>
+    props.type !== "modal" &&
+    css`
+      padding: 2.4rem 4rem;
+
+      /* Box */
+      background-color: var(--color-grey-0);
+      border: 1px solid var(--color-grey-100);
+      border-radius: var(--border-radius-md);
+    `}
+
+  ${(props) =>
+    props.type === "modal" &&
+    css`
+      width: 80rem;
+    `}
+    
+  overflow: hidden;
+  font-size: 1.4rem;
+`;
+
+export default Form;
@@ -0,0 +1,59 @@
+import styled, { css } from "styled-components";
+
+const StyledFormRow = styled.div`
+  display: grid;
+  align-items: center;
+
+  grid-template-columns: ${(props) =>
+    props.orientation === "vertical" ? "1fr" : "24rem 1fr 1.2fr"};
+  gap: ${(props) => (props.orientation === "vertical" ? "0.8rem" : "2.4rem")};
+
+  padding: 1.2rem 0;
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+
+  &:not(:last-child) {
+    border-bottom: ${(props) =>
+      props.orientation === "vertical"
+        ? "none"
+        : "1px solid var(--color-grey-100)"};
+  }
+
+  /* Special treatment if the row contains buttons, and if it's NOT a vertical row */
+  ${(props) =>
+    props.orientation !== "vertical" &&
+    css`
+      &:has(button) {
+        display: flex;
+        justify-content: flex-end;
+        gap: 1.2rem;
+      }
+    `}
+`;
+
+const Label = styled.label`
+  font-weight: 500;
+`;
+
+const Error = styled.span`
+  font-size: 1.4rem;
+  color: var(--color-red-700);
+`;
+
+function FormRow({ label, error, children, orientation }) {
+  return (
+    <StyledFormRow orientation={orientation}>
+      {label && <Label htmlFor={children.props.id}>{label}</Label>}
+      {children}
+      {error && <Error>{error}</Error>}
+    </StyledFormRow>
+  );
+}
+
+export default FormRow;
@@ -0,0 +1,33 @@
+import styled, { css } from "styled-components";
+
+// const test = css`
+//   text-align: center;
+//   ${10 > 5 && "background-color: yellow"}
+// `;
+
+const Heading = styled.h1`
+  ${(props) =>
+    props.as === "h1" &&
+    css`
+      font-size: 3rem;
+      font-weight: 600;
+    `}
+
+  ${(props) =>
+    props.as === "h2" &&
+    css`
+      font-size: 2rem;
+      font-weight: 600;
+    `}
+    
+    ${(props) =>
+    props.as === "h3" &&
+    css`
+      font-size: 2rem;
+      font-weight: 500;
+    `}
+    
+  line-height: 1.4;
+`;
+
+export default Heading;
@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+const Input = styled.input`
+  border: 1px solid var(--color-grey-300);
+  background-color: var(--color-grey-0);
+  border-radius: var(--border-radius-sm);
+  padding: 0.8rem 1.2rem;
+  box-shadow: var(--shadow-sm);
+`;
+
+export default Input;
@@ -0,0 +1,25 @@
+import styled, { css } from "styled-components";
+
+const Row = styled.div`
+  display: flex;
+
+  ${(props) =>
+    props.type === "horizontal" &&
+    css`
+      justify-content: space-between;
+      align-items: center;
+    `}
+
+  ${(props) =>
+    props.type === "vertical" &&
+    css`
+      flex-direction: column;
+      gap: 1.6rem;
+    `}
+`;
+
+Row.defaultProps = {
+  type: "vertical",
+};
+
+export default Row;
@@ -0,0 +1,22 @@
+import styled, { keyframes } from "styled-components";
+
+const rotate = keyframes`
+  to {
+    transform: rotate(1turn)
+  }
+`;
+
+const Spinner = styled.div`
+  margin: 4.8rem auto;
+
+  width: 6.4rem;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: radial-gradient(farthest-side, var(--color-brand-600) 94%, #0000)
+      top/10px 10px no-repeat,
+    conic-gradient(#0000 30%, var(--color-brand-600));
+  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 0);
+  animation: ${rotate} 1.5s infinite linear;
+`;
+
+export default Spinner;
@@ -0,0 +1,59 @@
+import styled from "styled-components";
+
+const StyledTable = styled.div`
+  border: 1px solid var(--color-grey-200);
+
+  font-size: 1.4rem;
+  background-color: var(--color-grey-0);
+  border-radius: 7px;
+  overflow: hidden;
+`;
+
+const CommonRow = styled.header`
+  display: grid;
+  grid-template-columns: ${(props) => props.columns};
+  column-gap: 2.4rem;
+  align-items: center;
+  transition: none;
+`;
+
+const StyledHeader = styled(CommonRow)`
+  padding: 1.6rem 2.4rem;
+
+  background-color: var(--color-grey-50);
+  border-bottom: 1px solid var(--color-grey-100);
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  font-weight: 600;
+  color: var(--color-grey-600);
+`;
+
+const StyledBody = styled.section`
+  margin: 0.4rem 0;
+`;
+
+const StyledRow = styled(CommonRow)`
+  padding: 1.2rem 2.4rem;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--color-grey-100);
+  }
+`;
+
+const Footer = styled.footer`
+  background-color: var(--color-grey-50);
+  display: flex;
+  justify-content: center;
+  padding: 1.2rem;
+
+  &:not(:has(*)) {
+    display: none;
+  }
+`;
+
+const Empty = styled.p`
+  font-size: 1.6rem;
+  font-weight: 500;
+  text-align: center;
+  margin: 2.4rem;
+`;
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Textarea = styled.textarea`
+  padding: 0.8rem 1.2rem;
+  border: 1px solid var(--color-grey-300);
+  border-radius: 5px;
+  background-color: var(--color-grey-0);
+  box-shadow: var(--shadow-sm);
+  width: 100%;
+  height: 8rem;
+`;