Move to snowpack

src/components/basic/Timeline.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface TimelineProps {}
+
+const Timeline = (props: TimelineProps) => {
+  return <div></div>;
+};
+
+export default Timeline;

src/components/basic/TimelineItem.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface TimelineItemProps {
+  time: number;
+  color: string;
+}
+
+const TimelineItem = (props: TimelineItemProps) => {
+  return <div className={`rounded-full h-6 w-6 bg-${props.color}`}>Test</div>;
+};
+
+export default TimelineItem;

src/components/basic/ToggleSwitch.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+
+interface ToggleSwitchProps {
+  active: boolean;
+  toggle?: Function;
+}
+
+const ToggleSwitch = (props: ToggleSwitchProps) => {
+  const [active, setActive] = useState(false);
+
+  useEffect(() => {
+    setActive(props.active);
+  }, []);
+
+  return (
+    <div
+      onClick={() => {
+        setActive(!active);
+      }}
+      className={`w-12 h-6 flex items-center bg-gray-300 rounded-full p-1 duration-300 ease-in-out my-auto ${
+        active ? 'bg-green-400' : null
+      }`}
+    >
+      <div
+        className={`bg-white w-4 h-4 rounded-full shadow-md transform duration-300 ease-in-out ${
+          active ? 'translate-x-6' : null
+        }`}
+      ></div>
+    </div>
+  );
+};
+
+export default ToggleSwitch;