chore: directory restructure

merge with directory
2026-08-14 11:53:49 +00:00 · 2024-10-26 20:05:27 +02:00
parent b1bff22b84
commit 7c19c52332
33 changed files with 35 additions and 35 deletions
@@ -0,0 +1,174 @@
+$inner-padding: 1rem;
+
+.header {
+  font-size: 2rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid $white-10;
+  font-weight: 600;
+}
+
+.subheader {
+  font-size: 1.5rem;
+  padding-bottom: 0.5rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.title {
+  font-size: 1.375rem;
+  padding: 0 2rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: $gray-300;
+}
+
+.section {
+  position: relative;
+  margin-top: 2rem;
+  font-size: calc(1rem - 1px);
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  color: $ui-white;
+}
+
+.paragraph {
+  padding: 0.5rem 0;
+}
+
+.card {
+  position: relative;
+  padding: 2rem;
+  background-color: $white-3;
+  border: 1px solid $gray-1100;
+  border-radius: 3px;
+}
+
+.error {
+  font-size: $inner-section-text-size;
+  display: block;
+  color: $error-red;
+}
+
+.pad {
+  padding: 0 2rem;
+  max-height: 550px;
+  overflow-y: scroll;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: calc(1rem - 2px);
+  text-align: left;
+  margin-bottom: 2rem;
+
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    box-shadow: 0 1px $white-10;
+    background-color: $gray-1350;
+  }
+
+  th {
+    font-weight: 400;
+    color: $gray-400;
+    white-space: nowrap;
+    text-transform: capitalize;
+  }
+
+  th,
+  td {
+    padding: 0.5rem;
+  }
+
+  tr:nth-child(even) {
+    background-color: $white-1;
+  }
+}
+
+.listGroup {
+  padding: 0 2rem;
+
+  > li:not(:last-child) {
+    border-bottom: 1px solid $white-10;
+  }
+}
+
+.listItem {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  padding: 0.5rem 0;
+}
+
+.fieldTitle {
+  color: $ui-white;
+  font-size: 1rem;
+}
+
+.fieldDescription {
+  font-size: calc(1rem - 2px);
+  color: $gray-400;
+}
+
+.fieldError {
+  font-size: calc(1rem - 2px);
+  color: $red-500;
+}
+
+.divider {
+  border-top: 1px solid $white-10;
+  margin: 1rem -2rem;
+  z-index: 999;
+}
+
+.overlay {
+  position: absolute;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(2px);
+  display: grid;
+  place-content: center;
+  background-color: $black-10;
+}
+
+.loader {
+  $loader-size: 4rem;
+  width: $loader-size;
+  height: $loader-size;
+  background: $blue-500;
+  display: inline-block;
+  border-radius: 50%;
+  box-sizing: border-box;
+  animation: animloader 1s ease-in infinite;
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+@keyframes animloader {
+  0% {
+    transform: scale(0);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
@@ -0,0 +1,94 @@
+import { HTMLAttributes, ReactNode } from 'react';
+
+import { cx } from '../../../common/utils/styleUtils';
+
+import style from './PanelUtils.module.scss';
+
+export function Header({ children }: { children: ReactNode }) {
+  return <h2 className={style.header}>{children}</h2>;
+}
+
+export function SubHeader({ children }: { children: ReactNode }) {
+  return <h3 className={style.subheader}>{children}</h3>;
+}
+
+export function Title({ children }: { children: ReactNode }) {
+  return <h4 className={style.title}>{children}</h4>;
+}
+
+type AllowedTags = 'div' | 'form';
+type SectionProps<C extends AllowedTags> = {
+  as?: C;
+  children: ReactNode;
+} & JSX.IntrinsicElements[C];
+
+export function Section<C extends AllowedTags = 'div'>({ as, children, ...props }: SectionProps<C>) {
+  const Element = as ?? 'div';
+  return (
+    <Element className={style.section} {...(props as HTMLAttributes<HTMLElement>)}>
+      {children}
+    </Element>
+  );
+}
+
+export function Paragraph({ children }: { children: ReactNode }) {
+  return <p className={style.paragraph}>{children}</p>;
+}
+
+export function Card({ children, ...props }: { children: ReactNode } & JSX.IntrinsicElements['div']) {
+  return (
+    <div className={style.card} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function Table({ className, children }: { className?: string; children: ReactNode }) {
+  const classes = cx([style.table, className]);
+  return (
+    <div className={style.pad}>
+      <table className={classes}>{children}</table>
+    </div>
+  );
+}
+
+export function ListGroup({ children }: { children: ReactNode }) {
+  return <ul className={style.listGroup}>{children}</ul>;
+}
+
+export function ListItem({ children }: { children: ReactNode }) {
+  return <li className={style.listItem}>{children}</li>;
+}
+
+export function Field({ title, description, error }: { title: string; description: string; error?: string }) {
+  return (
+    <div className={style.fieldTitle}>
+      {title}
+      {error && <Error>{error}</Error>}
+      {!error && description && <Description>{description}</Description>}
+    </div>
+  );
+}
+
+export function Description({ children }: { children: ReactNode }) {
+  return <div className={style.fieldDescription}>{children}</div>;
+}
+
+export function Error({ children }: { children: ReactNode }) {
+  return <div className={style.fieldError}>{children}</div>;
+}
+
+export function Divider() {
+  return <hr className={style.divider} />;
+}
+
+export function Loader({ isLoading }: { isLoading: boolean }) {
+  if (!isLoading) {
+    return null;
+  }
+  return (
+    <div className={style.overlay}>
+      <div className={style.loader} />
+    </div>
+  );
+}