feat: add user profile page (#6)

components/design/Textarea/Textarea.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, Story } from '@storybook/react'
+
+import { Textarea as Component, TextareaProps } from './Textarea'
+
+const Stories: Meta = {
+  title: 'Textarea',
+  component: Component
+}
+
+export default Stories
+
+export const Textarea: Story<TextareaProps> = (arguments_) => {
+  return <Component {...arguments_} />
+}
+Textarea.args = { label: 'Textarea' }

components/design/Textarea/Textarea.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react'
+
+import { Textarea } from './Textarea'
+
+describe('<Textarea />', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Textarea label='Textarea' />)
+    expect(baseElement).toBeTruthy()
+  })
+})

components/design/Textarea/Textarea.tsx

@@ -0,0 +1,30 @@
+import TextareaAutosize, {
+  TextareaAutosizeProps
+} from 'react-textarea-autosize'
+
+export interface TextareaProps extends TextareaAutosizeProps {
+  label: string
+}
+
+export const Textarea: React.FC<TextareaProps> = (props) => {
+  const { label, id, ...rest } = props
+
+  return (
+    <div className='flex flex-col'>
+      <div className='flex justify-between mt-6 mb-2'>
+        <label className='pl-1' htmlFor={id}>
+          {label}
+        </label>
+      </div>
+      <div className='mt-0 relative'>
+        <TextareaAutosize
+          className='p-3 rounded-lg bg-[#f1f1f1] text-[#2a2a2a] caret-green-600 font-paragraph w-full focus:border focus:outline-none resize-none focus:shadow-green overflow-hidden'
+          wrap='soft'
+          id={id}
+          name={id}
+          {...rest}
+        />
+      </div>
+    </div>
+  )
+}

components/design/Textarea/index.ts

@@ -0,0 +1 @@
+export * from './Textarea'