-
-
+ {children}
+
diff --git a/src/App/AppLayout/style.module.scss b/src/App/AppLayout/style.module.scss
new file mode 100644
index 0000000..9f1e49f
--- /dev/null
+++ b/src/App/AppLayout/style.module.scss
@@ -0,0 +1,16 @@
+.container {
+ display: flex;
+
+ width: 100vw;
+ height: 100dvh;
+
+ > * {
+ flex: 1;
+ }
+
+ @media (max-width: 1200px) {
+ & {
+ flex-direction: column;
+ }
+ }
+}
diff --git a/src/App/index.tsx b/src/App/index.tsx
new file mode 100644
index 0000000..43fd983
--- /dev/null
+++ b/src/App/index.tsx
@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { AppLayout } from "./AppLayout";
+import { Editor } from "../Editor";
+import { TransformGrid } from "../TransformGrid";
+
+export const App: FC = () =>
+ The PTOOLS
+Right tools for you!
+-
+ {transforms.map((v, i) =>
+
+
+ )
+}
diff --git a/src/TransformGridItem/style.module.scss b/src/TransformGridItem/style.module.scss
new file mode 100644
index 0000000..4208148
--- /dev/null
+++ b/src/TransformGridItem/style.module.scss
@@ -0,0 +1,38 @@
+.item {
+ background-color: #1e1e1e;
+ border-radius: 6px;
+ display: flex;
+ padding: 10px;
+ flex-direction: column;
+ min-height: 300px;
+
+ .toolbar {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ padding: 0px 10px;
+ background-color: #323232;
+ border-radius: 4px;
+
+ .name {
+ font-size: inherit;
+ padding: 14px 0px;
+ }
+
+ .options {
+ flex-grow: 1;
+ display: flex;
+ padding: 14px 2px;
+ gap: 10px;
+ height: 100%;
+ overflow-x: scroll;
+ scrollbar-width: thin;
+ scrollbar-color: gray #323232;
+ align-items: center;
+
+ .optionItem {
+ display: flex;
+ }
+ }
+ }
+}
diff --git a/src/Transforms/Base64DecodeTransform.ts b/src/Transforms/Base64DecodeTransform.ts
new file mode 100644
index 0000000..dc89f6a
--- /dev/null
+++ b/src/Transforms/Base64DecodeTransform.ts
@@ -0,0 +1,6 @@
+import { Transform } from "./Transform";
+
+export const Base64DecodeTransform: Transform = {
+ name: 'base64d',
+ fn: () => 'Hello, world!'
+}
diff --git a/src/Transforms/Transform.ts b/src/Transforms/Transform.ts
new file mode 100644
index 0000000..30c15ed
--- /dev/null
+++ b/src/Transforms/Transform.ts
@@ -0,0 +1,12 @@
+import { Base64DecodeTransform } from "./Base64DecodeTransform"
+
+export interface Transform {
+ name: string
+ fn: () => string
+}
+
+export const transforms: Transform[] = [
+ Base64DecodeTransform,
+ Base64DecodeTransform,
+ Base64DecodeTransform,
+]
diff --git a/src/main.css b/src/main.css
new file mode 100644
index 0000000..84bc2e4
--- /dev/null
+++ b/src/main.css
@@ -0,0 +1,12 @@
+:root {
+ color: #fafafa;
+ background-color: #212121;
+ font-family: 'JetBrains Mono Variable', monospace;
+ user-select: none;
+}
+
+h1, h2, h3, h4, h5, h6, p, pre, textarea, input, button, li, ul, ol {
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..685b1bd
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,22 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import 'normalize.css/normalize.css'
+import '@fontsource-variable/jetbrains-mono/index.css'
+
+// ---
+
+import './main.css'
+import { App } from './App'
+import { LandingAnimation } from './LandingAnimation'
+import { RecoilRoot } from 'recoil'
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+
+
+ {transform.name}
+ +
+
+
+
+
+
+