Add 7. cells GUI

.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+	env: {
+		browser: true,
+		es2021: true,
+		node: true
+	},
+	parser: "@typescript-eslint/parser",
+	parserOptions: {
+		ecmaVersion: 13,
+		ecmaFeatures: {
+			jsx: true
+		},
+		sourceType: "module"
+	},
+	settings: {
+		"import/resolver": {
+			typescript: {}
+		},
+		react: {
+			version: "detect"
+		}
+	},
+	extends: [
+		"plugin:@typescript-eslint/recommended",
+		"plugin:react/recommended",
+		"plugin:react-hooks/recommended",
+		"plugin:prettier/recommended"
+	],
+	plugins: ["prettier"],
+	rules: {
+		"prettier/prettier": "warn",
+		"react/react-in-jsx-scope": "off"
+	}
+}

.prettierrc

@@ -0,0 +1,20 @@
+{
+  "bracketSpacing": false,
+  "printWidth": 80,
+  "proseWrap": "never",
+  "requirePragma": false,
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "useTabs": true,
+  "overrides": [
+    {
+      "files": [".prettierrc", "*.json"],
+      "options": {
+        "printWidth": 200,
+        "tabWidth": 2,
+        "useTabs": false
+      }
+    }
+  ]
+}

src/App.tsx

@@ -1,45 +1,55 @@
-import Counter from './counter'
-import TempConvertor from './temp-convertor'
-import Timer from './timer'
-import FlightBooker from './flight-booker'
-import CRUD from './CRUD'
-import CircleDrawer from './circle-drawer'
+import Counter from "./counter"
+import TempConvertor from "./temp-convertor"
+import Timer from "./timer"
+import FlightBooker from "./flight-booker"
+import CRUD from "./CRUD"
+import CircleDrawer from "./circle-drawer"
+import Cells from "./cells"
+import {GuiSection} from "./GuiSection"
 
 function App() {
-  return (
-    <main>
-      <h1>7GUIs with Valtio</h1>
-      <a href="https://eugenkiss.github.io/7guis/">7 GUIs a Programming Benchmark</a>
-      {' | '}
-      <a href="https://valtio.pmnd.rs/">Valtio</a>
-      <section>
-        <h2>1. Counter</h2>
-        <Counter />
-      </section>
-      <hr />
-      <section>
-        <h2>2. Temperature Converter</h2>
-        <TempConvertor />
-      </section>
-      <hr />
-      <section>
-        <h2>3. Flight Booker</h2>
-        <FlightBooker />
-      </section>
-      <section>
-        <h2>4. Timer</h2>
-        <Timer />
-      </section>
-      <section>
-        <h2>5. CRUD</h2>
-        <CRUD />
-      </section>
-      <section>
-        <h2>6. Circle Drawer</h2>
-        <CircleDrawer />
-      </section>
-    </main>
-  )
+	return (
+		<main>
+			<h1>7GUIs with Valtio</h1>
+			<a href="https://eugenkiss.github.io/7guis/">
+				7 GUIs a Programming Benchmark
+			</a>
+			{" | "}
+			<a href="https://valtio.pmnd.rs/">Valtio</a>
+			{" | "}
+			<a href="https://blog.axlight.com/posts/learning-react-state-manager-jotai-with-7guis-tasks/">
+				Jotai 7GUIs
+			</a>
+			<hr />
+			<GuiSection title="1. Counter" dir="counter">
+				<Counter />
+			</GuiSection>
+			<hr />
+			<GuiSection title="2. Temperature Converter" dir="temp-convertor">
+				<TempConvertor />
+			</GuiSection>
+			<hr />
+			<GuiSection title="3. Flight Booker" dir="flight-booker">
+				<FlightBooker />
+			</GuiSection>
+			<hr />
+			<GuiSection title="4. Timer" dir="timer">
+				<Timer />
+			</GuiSection>
+			<hr />
+			<GuiSection title="5. CRUD" dir="CRUD">
+				<CRUD />
+			</GuiSection>
+			<hr />
+			<GuiSection title="6. Circle Drawer" dir="circle-drawer">
+				<CircleDrawer />
+			</GuiSection>
+			<hr />
+			<GuiSection title="7. Cells" dir="cells">
+				<Cells />
+			</GuiSection>
+		</main>
+	)
 }
 
 export default App

src/CRUD/index.css

@@ -1,20 +1,20 @@
 select {
-  width: 416px;
+	width: 416px;
 }
 
 .buttons {
-  display: flex;
-  width: 416px;
+	display: flex;
+	width: 416px;
 }
 
 .buttons > button {
-  width: calc(416px / 3);
+	width: calc(416px / 3);
 }
 
 .buttons > button + button {
-  margin-left: 4px;
+	margin-left: 4px;
 }
 
-input[name='filter'] {
-  width: 396px;
+input[name="filter"] {
+	width: 396px;
 }