fix lint

Khan · Apr 4, 2024 · 90e2ba2 · 90e2ba2
1 parent e98878c
commit 90e2ba2
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 102 deletions.
diff --git a/src/globals.d.ts b/src/globals.d.ts
@@ -1,24 +1,24 @@
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
-  export default classes;
+declare module "*.module.css" {
+    const classes: {[key: string]: string};
+    export default classes;
 }
 
-declare module '*.module.scss' {
-  const classes: { [key: string]: string };
-  export default classes;
+declare module "*.module.scss" {
+    const classes: {[key: string]: string};
+    export default classes;
 }
 
-declare module '*.module.sass' {
-  const classes: { [key: string]: string };
-  export default classes;
+declare module "*.module.sass" {
+    const classes: {[key: string]: string};
+    export default classes;
 }
 
-declare module '*.module.less' {
-  const classes: { [key: string]: string };
-  export default classes;
+declare module "*.module.less" {
+    const classes: {[key: string]: string};
+    export default classes;
 }
 
-declare module '*.module.styl' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
+declare module "*.module.styl" {
+    const classes: {[key: string]: string};
+    export default classes;
+}
diff --git a/src/react-render-perf/lesson-01/index.tsx b/src/react-render-perf/lesson-01/index.tsx
@@ -8,19 +8,19 @@ import Content from "./content.mdx";
 import Exercise from "./exercise/index";
 import Solution from "./solution/index";
 
-export default function Page() {    
-  return (
-    <div className={styles.container}>
-      <div className={styles.header}>
-        <Link to="/react-render-perf">Home</Link>
-        <h1>01 - Memoizing Expensive Components</h1>
-      </div>
-      <div className={styles.column}>
-        <Content components={{code}} />
-      </div>
-      <div className={styles.column}>
-        <Tabs tabs={{exercise: Exercise, solution: Solution}} />
-      </div>
-    </div>
-  );
+export default function Page() {
+    return (
+        <div className={styles.container}>
+            <div className={styles.header}>
+                <Link to="/react-render-perf">Home</Link>
+                <h1>01 - Memoizing Expensive Components</h1>
+            </div>
+            <div className={styles.column}>
+                <Content components={{code}} />
+            </div>
+            <div className={styles.column}>
+                <Tabs tabs={{exercise: Exercise, solution: Solution}} />
+            </div>
+        </div>
+    );
 }
diff --git a/src/react-render-perf/lesson-02/exercise/gradient.tsx b/src/react-render-perf/lesson-02/exercise/gradient.tsx
@@ -13,7 +13,9 @@ export function Gradient({start, stop, steps}: Props) {
     const swatches: Array<ReactElement<typeof Swatch>> = [];
     for (let i = 0; i < steps; i++) {
         const color = lerpColor(start, stop, i / steps);
-        swatches.push(<Swatch key={toCssColor(color)} color={color} size={512 / steps} />);
+        swatches.push(
+            <Swatch key={toCssColor(color)} color={color} size={512 / steps} />,
+        );
     }
 
     return (

diff --git a/src/react-render-perf/lesson-02/exercise/grid.tsx b/src/react-render-perf/lesson-02/exercise/grid.tsx
@@ -23,7 +23,9 @@ export function Grid({
         const start = lerpColor(topLeft, bottomLeft, i / steps);
         const stop = lerpColor(topRight, bottomRight, i / steps);
         const key = `${toCssColor(start)}-${toCssColor(stop)}`;
-        gradients.push(<Gradient key={key} start={start} stop={stop} steps={steps} />);
+        gradients.push(
+            <Gradient key={key} start={start} stop={stop} steps={steps} />,
+        );
     }
 
     return (

diff --git a/src/react-render-perf/lesson-02/index.tsx b/src/react-render-perf/lesson-02/index.tsx
@@ -8,19 +8,19 @@ import Content from "./content.mdx";
 import Exercise from "./exercise/index";
 import Solution from "./solution/index";
 
-export default function Page() {    
-  return (
-    <div className={styles.container}>
-      <div className={styles.header}>
-        <Link to="/react-render-perf">Home</Link>
-        <h1>02 - Prevent Context From Re-rendering</h1>
-      </div>
-      <div className={styles.column}>
-        <Content components={{code}} />
-      </div>
-      <div className={styles.column}>
-        <Tabs tabs={{exercise: Exercise, solution: Solution}} />
-      </div>
-    </div>
-  );
+export default function Page() {
+    return (
+        <div className={styles.container}>
+            <div className={styles.header}>
+                <Link to="/react-render-perf">Home</Link>
+                <h1>02 - Prevent Context From Re-rendering</h1>
+            </div>
+            <div className={styles.column}>
+                <Content components={{code}} />
+            </div>
+            <div className={styles.column}>
+                <Tabs tabs={{exercise: Exercise, solution: Solution}} />
+            </div>
+        </div>
+    );
 }
diff --git a/src/react-render-perf/lesson-03/index.tsx b/src/react-render-perf/lesson-03/index.tsx
@@ -8,19 +8,19 @@ import Content from "./content.mdx";
 import Exercise from "./exercise/index";
 import Solution from "./solution/index";
 
-export default function Page() {    
-  return (
-    <div className={styles.container}>
-      <div className={styles.header}>
-        <Link to="/react-render-perf">Home</Link>
-        <h1>03 - Avoid Using Context</h1>
-      </div>
-      <div className={styles.column}>
-        <Content components={{code}} />
-      </div>
-      <div className={styles.column}>
-        <Tabs tabs={{exercise: Exercise, solution: Solution}} />
-      </div>
-    </div>
-  );
+export default function Page() {
+    return (
+        <div className={styles.container}>
+            <div className={styles.header}>
+                <Link to="/react-render-perf">Home</Link>
+                <h1>03 - Avoid Using Context</h1>
+            </div>
+            <div className={styles.column}>
+                <Content components={{code}} />
+            </div>
+            <div className={styles.column}>
+                <Tabs tabs={{exercise: Exercise, solution: Solution}} />
+            </div>
+        </div>
+    );
 }
diff --git a/src/react-render-perf/lesson-04/index.tsx b/src/react-render-perf/lesson-04/index.tsx
@@ -8,19 +8,19 @@ import Content from "./content.mdx";
 import Exercise from "./exercise/index";
 import Solution from "./solution/index";
 
-export default function Page() {    
-  return (
-    <div className={styles.container}>
-      <div className={styles.header}>
-        <Link to="/react-render-perf">Home</Link>
-        <h1>04 - Splitting Up Large Components</h1>
-      </div>
-      <div className={styles.column}>
-        <Content components={{code}} />
-      </div>
-      <div className={styles.column}>
-        <Tabs tabs={{exercise: Exercise, solution: Solution}} />
-      </div>
-    </div>
-  );
+export default function Page() {
+    return (
+        <div className={styles.container}>
+            <div className={styles.header}>
+                <Link to="/react-render-perf">Home</Link>
+                <h1>04 - Splitting Up Large Components</h1>
+            </div>
+            <div className={styles.column}>
+                <Content components={{code}} />
+            </div>
+            <div className={styles.column}>
+                <Tabs tabs={{exercise: Exercise, solution: Solution}} />
+            </div>
+        </div>
+    );
 }
diff --git a/src/react-render-perf/shared/tabs.tsx b/src/react-render-perf/shared/tabs.tsx
@@ -5,31 +5,37 @@ import * as styles from "../shared/index.module.css";
 type Tab = "exercise" | "solution";
 
 type Props = {
-  tabs: {
-    exercise: () => React.ReactNode;
-    solution: () => React.ReactNode;
-  }
+    tabs: {
+        exercise: () => React.ReactNode;
+        solution: () => React.ReactNode;
+    };
 };
 
 export default function Tabs({tabs}: Props) {
-  const [tab, setTab] = React.useState<Tab>("exercise");
+    const [tab, setTab] = React.useState<Tab>("exercise");
 
-  return <>
-    <div className={styles.tabs}>
-      <span
-        className={tab === "exercise" ? styles.active : styles.inactive}
-        onClick={() => setTab("exercise")}
-      >
-        Exercise
-      </span>
-      <span
-        className={tab === "solution" ? styles.active : styles.inactive}
-        onClick={() => setTab("solution")}
-      >
-        Solution
-      </span>
-    </div>
-    {tab === "exercise" && <tabs.exercise />}
-    {tab === "solution" && <tabs.solution />}
-  </>;
-}
+    return (
+        <>
+            <div className={styles.tabs}>
+                <span
+                    className={
+                        tab === "exercise" ? styles.active : styles.inactive
+                    }
+                    onClick={() => setTab("exercise")}
+                >
+                    Exercise
+                </span>
+                <span
+                    className={
+                        tab === "solution" ? styles.active : styles.inactive
+                    }
+                    onClick={() => setTab("solution")}
+                >
+                    Solution
+                </span>
+            </div>
+            {tab === "exercise" && <tabs.exercise />}
+            {tab === "solution" && <tabs.solution />}
+        </>
+    );
+}