From 0824a8ea3413520f5a4fea0f751b445f4b33bf5f Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 22 Oct 2024 17:04:19 +0800
Subject: [PATCH] new components

---
 .../DiskManagement/InputPostTab.tsx           | 21 +++++++++++++
 .../DiskManagement/InputResetButton.tsx       | 31 +++++++++++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 apps/studio/components/interfaces/DiskManagement/InputPostTab.tsx
 create mode 100644 apps/studio/components/interfaces/DiskManagement/InputResetButton.tsx

diff --git a/apps/studio/components/interfaces/DiskManagement/InputPostTab.tsx b/apps/studio/components/interfaces/DiskManagement/InputPostTab.tsx
new file mode 100644
index 00000000000..f8cadcab95a
--- /dev/null
+++ b/apps/studio/components/interfaces/DiskManagement/InputPostTab.tsx
@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react'
+
+interface InputPostTabProps {
+  children: React.ReactNode
+  label: string
+}
+
+export const InputPostTab = forwardRef<HTMLDivElement, InputPostTabProps>(
+  ({ children, label }, ref) => {
+    return (
+      <div ref={ref} className="flex -space-x-px">
+        {children}
+        <div className="border border-strong bg-surface-300 rounded-r-md px-3 flex items-center justify-center">
+          <span className="text-foreground-lighter text-xs font-mono">{label}</span>
+        </div>
+      </div>
+    )
+  }
+)
+
+InputPostTab.displayName = 'InputPostTab'
diff --git a/apps/studio/components/interfaces/DiskManagement/InputResetButton.tsx b/apps/studio/components/interfaces/DiskManagement/InputResetButton.tsx
new file mode 100644
index 00000000000..dd3ed7470af
--- /dev/null
+++ b/apps/studio/components/interfaces/DiskManagement/InputResetButton.tsx
@@ -0,0 +1,31 @@
+import { AnimatePresence, motion } from 'framer-motion'
+import { Button } from 'ui'
+import { RotateCcw } from 'lucide-react'
+
+function InputResetButton({ isDirty, onClick }: { isDirty: boolean; onClick: () => void }) {
+  return (
+    <AnimatePresence initial={false}>
+      {isDirty && (
+        <motion.div
+          key="reset-disksize"
+          initial={{ opacity: 0, scale: 0.95, x: -2 }}
+          animate={{ opacity: 1, scale: 1, x: 0 }}
+          exit={{ opacity: 0, scale: 0.95, x: -2 }}
+          transition={{ duration: 0.12 }}
+        >
+          <Button
+            htmlType="button"
+            type="default"
+            size="small"
+            className="px-2 text-foreground-light"
+            onClick={onClick}
+          >
+            <RotateCcw className="h-4 w-4" aria-hidden="true" />
+          </Button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}
+
+export { InputResetButton }