From 3e36cc8078b0d9d638b46bb14b8e96bb3789ce45 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Thu, 19 Sep 2024 01:12:15 -0300
Subject: [PATCH] Created new component "ZapSplitSlider"

---
 .../zap/components/zap-split-account-item.tsx | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/features/zap/components/zap-split-account-item.tsx

diff --git a/src/features/zap/components/zap-split-account-item.tsx b/src/features/zap/components/zap-split-account-item.tsx
new file mode 100644
index 000000000..8c5520a1a
--- /dev/null
+++ b/src/features/zap/components/zap-split-account-item.tsx
@@ -0,0 +1,35 @@
+import clsx from 'clsx';
+import React, { useState } from 'react';
+
+import { Slider } from 'soapbox/components/ui';
+
+const formattedWeight = (weight: number) =>{
+  return Number((weight * 100).toFixed());
+};
+
+interface IZapSplitSlider {
+  width?: string;
+  initialWeight: number;
+  onWeightChange: (newWeight: number) => void;
+}
+
+export const ZapSplitSlider: React.FC<IZapSplitSlider> = ({ initialWeight, onWeightChange, width = 'w-40' }) => {
+  const [value, setValue] = useState(initialWeight / 100);
+
+  const handleChange = (newValue: number) => {
+    setValue(newValue);
+    onWeightChange(Number((newValue * 100).toFixed()));
+  };
+
+  return (
+    <div className={clsx('flex flex-col', width)}>
+      {formattedWeight(value)}%
+      <Slider
+        value={value}
+        onChange={(v) => {
+          handleChange(v);
+        }}
+      />
+    </div>
+  );
+};
\ No newline at end of file