Initial framework for new UI with React/Typescript (#8885)

* Write a low resolution low fps stream from decoded frames (#8673)

* Generate low res low fps previews for recordings viewer

* Make sure previews end on the hour

* Fix durations and decrase keyframe interval to ensure smooth scrubbing

* Ensure minimized resolution is compatible with yuv

* Add ability to configure preview quality

* Fix

* Clean up previews more efficiently

* Use iterator

* Ensure final frame in preview is not duplicated

* initial react/ts framework

* fix gitignore glob excluding ts files

* ignore folders in web-new

* SWRConfig changes for swr 2.x

* use frigateConfig type in websocket handlers

---------

Co-authored-by: Nicolas Mowen <nickmowen213@gmail.com>

web-new/src/components/ui/heading.tsx

@@ -0,0 +1,73 @@
+import { cn } from "@/lib/utils";
+
+type HeadingElements = "h1" | "h2" | "h3" | "h4";
+
+const Heading = ({
+  children,
+  as,
+  className,
+}: {
+  children: React.ReactNode;
+  as: HeadingElements;
+  className?: string;
+}) => {
+  switch (as) {
+    case "h1":
+      return (
+        <h1
+          className={cn(
+            "scroll-m-20 text-3xl font-extrabold tracking-tight",
+            className
+          )}
+        >
+          {children}
+        </h1>
+      );
+    case "h2":
+      return (
+        <h2
+          className={cn(
+            "scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0 mb-3",
+            className
+          )}
+        >
+          {children}
+        </h2>
+      );
+    case "h3":
+      return (
+        <h3
+          className={cn(
+            "scroll-m-20 text-2xl font-semibold tracking-tight mb-3",
+            className
+          )}
+        >
+          {children}
+        </h3>
+      );
+    case "h4":
+      return (
+        <h4
+          className={cn(
+            "scroll-m-20 text-xl font-semibold tracking-tight",
+            className
+          )}
+        >
+          {children}
+        </h4>
+      );
+    default:
+      return (
+        <h1
+          className={cn(
+            "scroll-m-20 text-3xl font-extrabold tracking-tight",
+            className
+          )}
+        >
+          {children}
+        </h1>
+      );
+  }
+};
+
+export default Heading;