textInput を実装

src/shared/components/TextInput.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+defineProps<{
+  placeholder?: string;
+  size: 'sm' | 'md' | 'lg';
+}>();
+</script>
+
+<template>
+  <div class="background">
+    <div v-if="$slots['left']">
+      <slot name="left" class="side-icon" />
+    </div>
+    <input
+      type="text"
+      class="text-input"
+      :size="size"
+      :placeholder="placeholder"
+    />
+    <div v-if="$slots['right']">
+      <slot name="right" class="side-icon" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.background {
+  display: inline flex;
+  height: 32px;
+  align-items: center;
+  border:
+    1px solid,
+    $color-border border-color,
+    1px solid radius;
+}
+.background:focus-within {
+  outline: 2px solid;
+  outline-color: $color-primary;
+}
+.text-input {
+  height: 32px;
+  padding: 8px 8px;
+  border: none;
+  outline: none;
+  font-size: 16px;
+  font-weight: 500;
+  background-color: transparent;
+}
+.text-input::placeholder {
+  color: $color-text-placeholder;
+  opacity: 1;
+}
+.side-icon {
+  display: flex;
+  padding: 0 4px;
+  height: 32px;
+  align-items: center;
+}
+</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;