add tabs

Author: EskiMojo14

examples/lazy-injection/kitchen-sink/src/App.css

@@ -14,12 +14,13 @@
 }
 
 .App-header {
-  min-height: 100vh;
+  min-height: 50vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
+  margin-bottom: 10px;
 }
 
 .App-link {
@@ -37,3 +38,11 @@
     transform: translateY(0px);
   }
 }
+
+.tabs {
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 10px;
+}

examples/lazy-injection/kitchen-sink/src/App.tsx

@@ -1,8 +1,9 @@
-import { Suspense, useReducer, useTransition } from "react"
-import "./App.css"
+import { Suspense, useState, useTransition } from "react"
 import logo from "./logo.svg"
 import { Todos } from "./features/todos/Todos"
 import { lazily } from "react-lazily"
+import { Tab } from "./components/Tab"
+import "./App.css"
 
 // equivalent to
 // const Counter = lazy(() => import("./features/counter/Counter").then(m => ({ default: m.Counter }))
@@ -11,33 +12,15 @@ const { Counter } = lazily(() => import("./features/counter/Counter"))
 const { Quotes } = lazily(() => import("./features/quotes/Quotes"))
 
 const App = () => {
-  const [counterOpen, toggleCounter] = useReducer(b => !b, false)
-  const [quotesOpen, toggleQuotes] = useReducer(b => !b, false)
+  const [tab, setTab] = useState("todos")
   const [, startTransition] = useTransition()
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <Todos />
-        <details open={counterOpen}>
-          <summary onClick={() => startTransition(toggleCounter)}>
-            Counter example (lazy)
-          </summary>
-          <Suspense fallback="Loading counter">
-            {counterOpen && <Counter />}
-          </Suspense>
-        </details>
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
-        <details open={quotesOpen}>
-          <summary onClick={() => startTransition(toggleQuotes)}>
-            Quotes example (lazy)
-          </summary>
-          <Suspense fallback="Loading quotes">
-            {quotesOpen && <Quotes />}
-          </Suspense>
-        </details>
         <span>
           <span>Learn </span>
           <a
@@ -86,6 +69,37 @@ const App = () => {
           </a>
         </span>
       </header>
+      <div className="tabs">
+        <Tab
+          selected={tab === "todos"}
+          onClick={() => startTransition(() => setTab("todos"))}
+        >
+          Todos
+        </Tab>
+        <Tab
+          selected={tab === "counter"}
+          onClick={() => startTransition(() => setTab("counter"))}
+        >
+          Counter
+        </Tab>
+        <Tab
+          selected={tab === "quotes"}
+          onClick={() => startTransition(() => setTab("quotes"))}
+        >
+          Quotes
+        </Tab>
+      </div>
+      {tab === "todos" && <Todos />}
+      {tab === "counter" && (
+        <Suspense fallback="Loading counter">
+          <Counter />
+        </Suspense>
+      )}
+      {tab === "quotes" && (
+        <Suspense fallback="Loading quotes">
+          <Quotes />
+        </Suspense>
+      )}
     </div>
   )
 }

examples/lazy-injection/kitchen-sink/src/components/Tab.module.css

@@ -0,0 +1,29 @@
+.tab {
+  appearance: none;
+  background: none;
+  font-size: 32px;
+  padding-left: 12px;
+  padding-right: 12px;
+  outline: none;
+  border: 2px solid transparent;
+  color: rgb(112, 76, 182);
+  padding-bottom: 4px;
+  cursor: pointer;
+  background-color: rgba(112, 76, 182, 0.1);
+  border-radius: 2px;
+  transition: all 0.15s;
+}
+
+.tab:hover,
+.tab:focus {
+  border: 2px solid rgba(112, 76, 182, 0.4);
+}
+
+.tab:active {
+  background-color: rgba(112, 76, 182, 0.2);
+}
+
+.selected {
+  background-color: rgb(112, 76, 182);
+  color: #f1edf8;
+}

examples/lazy-injection/kitchen-sink/src/components/Tab.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react"
+import styles from "./Tab.module.css"
+import clsx from "clsx"
+
+export function Tab({
+  children,
+  selected,
+  onClick,
+}: {
+  children: ReactNode
+  selected: boolean
+  onClick: () => void
+}) {
+  return (
+    <button
+      className={clsx(styles.tab, selected && styles.selected)}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  )
+}