1 files changed, 27 insertions, 0 deletions
diff --git a/src/tools/ipv4-range-expander/result-row.vue b/src/tools/ipv4-range-expander/result-row.vue
new file mode 100644
index 0000000..b1782fe
--- /dev/null
+++ b/src/tools/ipv4-range-expander/result-row.vue
@@ -0,0 +1,27 @@
+<template>
+  <tr>
+    <td>
+      <n-text strong>{{ label }}</n-text>
+    </td>
+    <td :data-test-id="testId + '.old'"><span-copyable :value="oldValue" class="monospace" /></td>
+    <td :data-test-id="testId + '.new'">
+      <span-copyable :value="newValue"></span-copyable>
+    </td>
+  </tr>
+</template>
+
+<script setup lang="ts">
+import SpanCopyable from '@/components/SpanCopyable.vue';
+import _ from 'lodash';
+
+const props = withDefaults(defineProps<{ label: string; oldValue?: string; newValue?: string }>(), {
+  label: '',
+  oldValue: '',
+  newValue: '',
+});
+const { label, oldValue, newValue } = toRefs(props);
+
+const testId = computed(() => _.kebabCase(label.value));
+</script>
+
+<style scoped lang="less"></style>