new components

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'

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 }