textInput を実装

src/shared/components/TextInput.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+const props = defineProps<{
+  placeholder: string;
+  size: number;
+}>();
+</script>
+
+<template>
+  <div class="background">
+    <slot name="left" />
+    <input
+      type="text"
+      class="text-input"
+      :size="props.size"
+      :placeholder="props.placeholder"
+    />
+    <slot name="right" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.background {
+  display: inline flex;
+  gap: 8px;
+  height: 32px;
+  align-items: center;
+  padding: 8px 16px;
+  border-color: $color-border;
+  border: 1px solid;
+  border-radius: 4px;
+}
+.text-input {
+  height: 32px;
+  border: none;
+  outline: 0;
+  font-size: 16px;
+  font-weight: 500;
+  background-color: transparent;
+}
+.text-input::placeholder {
+  color: $color-text-placeholder;
+  opacity: 1;
+}
+</style>

src/styles/common.scss

@@ -8,6 +8,7 @@ $color-secondary: #e2e2e2;
 $color-secondary-hover: #f0f0f0;
 $color-secondary-disabled: #c9cac9;
 
+$color-border: #414143;
 $color-border-hover: #2b2b2b;
 $color-error: #ff4500;
 
@@ -18,6 +19,7 @@ $color-text-secondary-pale: #5151515d;
 $color-text-secondary-disabled: #939393;
 $color-text-white: #ffffff;
 $color-text-dimmed: #626264;
+$color-text-placeholder: #757578;
 
 $color-container-primary: #dcefdd;
 $color-container-secondary: #f1f1f4;