move components folder and fix build errors (#18)

* move components folder and fix build errors

Fixes https://github.com/owncast/owncast/issues/689

* Prettified Code!

Co-authored-by: nebunez <nebunez@users.noreply.github.com>

web/components/config/cpu-usage.tsx

@@ -0,0 +1,62 @@
+import React, { useContext, useState, useEffect } from 'react';
+import { Typography, Slider } from 'antd';
+import { ServerStatusContext } from '../../utils/server-status-context';
+
+const { Title } = Typography;
+
+const SLIDER_MARKS = {
+  1: 'lowest',
+  2: '',
+  3: '',
+  4: '',
+  5: 'highest',
+};
+
+const TOOLTIPS = {
+  1: 'lowest',
+  2: 'low',
+  3: 'medium',
+  4: 'high',
+  5: 'highest',
+};
+
+export default function CPUUsageSelector({ defaultValue, onChange }) {
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  const serverStatusData = useContext(ServerStatusContext);
+  const { serverConfig } = serverStatusData || {};
+  const { videoSettings } = serverConfig || {};
+
+  if (!videoSettings) {
+    return null;
+  }
+
+  useEffect(() => {
+    setSelectedOption(defaultValue);
+  }, [videoSettings]);
+
+  const handleChange = value => {
+    setSelectedOption(value);
+    onChange(value);
+  };
+
+  return (
+    <div className="config-video-segements-conatiner">
+      <Title level={3}>CPU Usage</Title>
+      <p>There are trade-offs when considering CPU usage blah blah more wording here.</p>
+      <br />
+      <br />
+      <div className="segment-slider-container">
+        <Slider
+          tipFormatter={value => TOOLTIPS[value]}
+          onChange={handleChange}
+          min={1}
+          max={Object.keys(SLIDER_MARKS).length}
+          marks={SLIDER_MARKS}
+          defaultValue={selectedOption}
+          value={selectedOption}
+        />
+      </div>
+    </div>
+  );
+}