Reordered components directory

components/shared/card/index.tsx

@@ -0,0 +1,20 @@
+import { View, Text } from "react-native";
+import tw from "twrnc";
+
+interface CardProps {
+  label?: string;
+  children: React.ReactNode;
+}
+
+export default function Card({ label, children }: CardProps) {
+  return (
+    <>
+      {label && <Text style={tw.style("ml-6 mt-2")}>{label}</Text>}
+      <View
+        style={tw.style("bg-white m-2 p-1 rounded-lg border border-slate-200")}
+      >
+        {children}
+      </View>
+    </>
+  );
+}

components/shared/gauge/index.tsx

@@ -0,0 +1,16 @@
+import { View, Text } from "react-native";
+import tw from "twrnc";
+
+interface GaugeProps {
+  label: string;
+  value: string;
+}
+
+export function Gauge({ label, value }: GaugeProps) {
+  return (
+    <View>
+      <Text>{label}</Text>
+      <Text style={tw.style("text-2xl")}>{value}</Text>
+    </View>
+  );
+}

components/shared/progress-bar/index.tsx

@@ -0,0 +1,42 @@
+import { View, Text } from "react-native";
+import tw from "twrnc";
+import { formatPercentage } from "../../../lib/helper/format";
+
+interface ProgressBarProps {
+  label: string;
+  value: number;
+  max: number;
+  formatFn?: (input: number) => string;
+}
+
+export default function ProgressBar({
+  label,
+  value,
+  max,
+  formatFn,
+}: ProgressBarProps) {
+  const percentage = formatPercentage(value / max);
+  return (
+    <View>
+      <View
+        style={tw.style("flex flex-row justify-between items-center mb-1 px-1")}
+      >
+        <Text>
+          {label} ({percentage})
+        </Text>
+        {formatFn && (
+          <Text>
+            {formatFn(value)}/{formatFn(max)}
+          </Text>
+        )}
+      </View>
+      <View style={tw.style("h-3 w-full bg-slate-300 rounded-lg")}>
+        <View
+          style={tw.style("h-full bg-slate-700 rounded-lg", {
+            width: percentage,
+          })}
+        />
+      </View>
+    </View>
+  );
+}