Use Border component

Rem0o · Apr 19, 2024 · e7e3a6d · e7e3a6d
1 parent 764080a
commit e7e3a6d
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 62 deletions.
diff --git a/src/reactComponents/border.tsx b/src/reactComponents/border.tsx
@@ -0,0 +1,19 @@
+import { twMerge } from "tailwind-merge";
+
+const defaultClass = "rounded-2xl border border-body-300 p-4";
+
+const Border = (
+  props: React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  >
+) => {
+  const { children, className, ...restOfProps } = props;
+  return (
+    <div {...restOfProps} className={twMerge(defaultClass, className)}>
+      {children}
+    </div>
+  );
+};
+
+export default Border;
diff --git a/src/reactComponents/docs/customSensors.tsx b/src/reactComponents/docs/customSensors.tsx
@@ -1,5 +1,8 @@
+import type consts from "../../common/consts";
 import icons from "../../common/icons";
-import { type DocSection, parameters, ParametersCard } from "./docSection";
+import Border from "../border";
+import { NiceSmallerHeader } from "../niceHeader";
+import { type DocSection, parameters } from "./docSection";
 
 const timeAverage: DocSection = {
   key: "Time Average",
@@ -13,14 +16,14 @@ const timeAverage: DocSection = {
         </p>
         <br />
 
-        <ParametersCard>
-          <h2>Parameters:</h2>
+        <Border>
+          <NiceSmallerHeader text="Parameters" />
 
           <ul>
             <li>Temperature source: {parameters.tempSource}</li>
             <li>Time: Averaging period of the selected temperature source.</li>
           </ul>
-        </ParametersCard>
+        </Border>
       </>
     );
   }
@@ -38,16 +41,16 @@ const mixSensor: DocSection = {
         </p>
         <br />
 
-        <ParametersCard>
-          <h2>Parameters:</h2>
+        <Border>
+          <NiceSmallerHeader text="Parameters" />
 
           <ul>
             <li>Function: {parameters.functions}</li>
             <li>
               Add sensor: Add any existing temperature sensor to the mix.{" "}
             </li>
           </ul>
-        </ParametersCard>
+        </Border>
       </>
     );
   }
@@ -67,13 +70,13 @@ const fileSensor: DocSection = {
         </p>
         <br />
 
-        <ParametersCard>
-          <h2>Parameters:</h2>
+        <Border>
+          <NiceSmallerHeader text="Parameters"/>
 
           <ul>
             <li>Path: Path of the sensor file.</li>
           </ul>
-        </ParametersCard>
+        </Border>
       </>
     );
   }
@@ -88,8 +91,8 @@ const offsetSensor: DocSection = {
         <p>The offset custom sensor allows to offset an existing sensor.</p>
         <br />
 
-        <ParametersCard>
-          <h2>Parameters:</h2>
+        <Border>
+          <NiceSmallerHeader text="Parameters" />
 
           <ul>
             <li>
@@ -100,7 +103,7 @@ const offsetSensor: DocSection = {
               (%) instead of absolute (degree).
             </li>
           </ul>
-        </ParametersCard>
+        </Border>
       </>
     );
   }

diff --git a/src/reactComponents/docs/docSection.tsx b/src/reactComponents/docs/docSection.tsx
@@ -1,5 +1,3 @@
-import Card from "../card";
-
 export type DocSection = {
   key: string;
   icon?: string;
@@ -15,8 +13,4 @@ export const parameters = {
     "Hysteresis and response time parameters will be ignored as soon at the minimum or maximum temperature point set by the fan curve is hit. Hysteresis will apply when re-entering the set temperature range.",
   tempSource: "Source to use as input.",
   functions: "Choose between Max, Min, Average, Sum, Subtract."
-};
-
-export const ParametersCard = ({ children }: { children: React.ReactNode }) => {
-  return <Card className="bg-body-50">{children}</Card>;
-};
+};
diff --git a/src/reactComponents/docs/fanCurves.tsx b/src/reactComponents/docs/fanCurves.tsx
@@ -1,4 +1,4 @@
-import { type DocSection, parameters, ParametersCard } from "./docSection";
+import { type DocSection, parameters } from "./docSection";
 import MixFanCurveCard from "../demo/mixFanCurveCard";
 import {
   createTempSource,
@@ -10,6 +10,8 @@ import { useState } from "react";
 import { useInterval } from "../../common/hooks";
 import LinearFanCurveCard from "../demo/linearFanCurveCard";
 import type { FanCurve, LinearFanCurveConfig } from "../demo/fanCurve";
+import Border from "../border";
+import { NiceSmallerHeader } from "../niceHeader";
 
 const DocDemoLinearFanCurveCard = () => {
   const updateSources = (): [TemperatureSource, TemperatureSource] => [
@@ -62,8 +64,8 @@ const linear: DocSection = {
 
         <br />
 
-        <ParametersCard>
-          <h2>Parameters:</h2>
+        <Border>
+          <NiceSmallerHeader text="Parameters" />
 
           <ul>
             <li>
@@ -85,7 +87,7 @@ const linear: DocSection = {
               {parameters.ignoreHysteresis}
             </li>
           </ul>
-        </ParametersCard>
+        </Border>
       </>
     );
   }
@@ -111,8 +113,8 @@ const graph: DocSection = {
         </p>
 
         <br />
-        <ParametersCard>
-          <h2>Parameters:</h2>
+        <Border>
+          <NiceSmallerHeader text="Parameters" />
 
           <ul>
             <li>Temperature source: {parameters.tempSource}</li>
@@ -126,7 +128,7 @@ const graph: DocSection = {
               {parameters.ignoreHysteresis}
             </li>
           </ul>
-        </ParametersCard>
+        </Border>
       </>
     );
   }
@@ -174,13 +176,13 @@ const flat: DocSection = {
         </p>
         <br />
 
-        <ParametersCard>
-          <h2>Parameters:</h2>
+        <Border>
+          <NiceSmallerHeader text="Parameters" />
 
           <ul>
             <li>Fan speed %: Percent.</li>
           </ul>
-        </ParametersCard>
+        </Border>
       </>
     );
   }
@@ -200,8 +202,8 @@ const sync: DocSection = {
         </p>
         <br />
 
-        <ParametersCard>
-          <h2>Parameters:</h2>
+        <Border>
+          <NiceSmallerHeader text="Parameters" />
 
           <ul>
             <li>Selected control: The control to sync with.</li>
@@ -211,7 +213,7 @@ const sync: DocSection = {
               instead of absolute.
             </li>
           </ul>
-        </ParametersCard>
+        </Border>
       </>
     );
   }
@@ -232,13 +234,13 @@ const trigger: DocSection = {
         </p>
         <br />
 
-        <ParametersCard>
-          <h2>Parameters:</h2>
+        <Border>
+          <NiceSmallerHeader text="Parameters" />
 
           <ul>
             <li>Response Time: {parameters.responseTime}</li>
           </ul>
-        </ParametersCard>
+        </Border>
       </>
     );
   }
@@ -260,14 +262,14 @@ const mix: DocSection = {
         </p>
 
         <br />
-        <ParametersCard>
-          <h2>Parameters:</h2>
+        <Border>
+          <NiceSmallerHeader text="Parameters" />
 
           <ul>
             <li>Function: {parameters.functions}</li>
             <li>Fan curves: Add any existing fan curve to the mix. </li>
           </ul>
-        </ParametersCard>
+        </Border>
       </>
     );
   }
@@ -293,8 +295,8 @@ const auto: DocSection = {
       </p>
       <br />
 
-      <ParametersCard>
-        <h2>Parameters:</h2>
+      <Border>
+        <NiceSmallerHeader text="Parameters" />
 
         <ul>
           <li>
@@ -316,7 +318,7 @@ const auto: DocSection = {
             temperature is decreasing.
           </li>
         </ul>
-      </ParametersCard>
+      </Border>
     </>
   )
 };

diff --git a/src/reactComponents/niceHeader.tsx b/src/reactComponents/niceHeader.tsx
@@ -14,4 +14,21 @@ const NiceHeader = ({ icon, text }: { icon?: string; text: string }) => {
   );
 };
 
-export default NiceHeader;
+const NiceSmallerHeader = ({ icon, text }: { icon?: string; text: string }) => {
+  return (
+    <h3 className="mb-2 flex items-center text-left">
+      {icon ? (
+        <svg className="mr-5 h-12 w-12" viewBox="0 0 24 24">
+          <path fill="currentColor" d={icon} />
+        </svg>
+      ) : (
+        <></>
+      )}
+
+      <span className="align-middle text-lg font-medium">{text}</span>
+    </h3>
+  );
+};
+
+
+export { NiceHeader, NiceSmallerHeader };
diff --git a/src/reactPages/docs.tsx b/src/reactPages/docs.tsx
@@ -17,7 +17,7 @@ import {
   auto
 } from "../reactComponents/docs/fanCurves";
 import { SmallIcon } from "../reactComponents/icon";
-import NiceHeader from "../reactComponents/niceHeader";
+import { NiceHeader } from "../reactComponents/niceHeader";
 import "./../styles/docs.css";
 import { PageHeader } from "../reactComponents/pageHeader";