#49 ぼちぼち

frontend/src/components/common/Form.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+type Props = { children: React.ReactNode }
+
+
+export default ({ children }: Props) => (
+    <div className="max-w-xl mx-auto p-4 space-y-4">
+      {children}
+    </div>)

frontend/src/components/common/Label.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+type Props = { children:  React.ReactNode
+               checkBox?: { label:    string
+                            checked:  boolean
+                            onChange: (event: React.ChangeEvent<HTMLInputElement>) => void } }
+
+
+export default ({ children, checkBox }: Props) => {
+  if (!(checkBox))
+    {
+      return (
+          <label className="block font-semibold mb-1">
+            {children}
+          </label>)
+    }
+
+  return (
+      <div className="flex gap-2 mb-1">
+        <label className="flex-1 block font-semibold">{children}</label>
+        <label className="flex items-center block gap-1">
+          <input type="checkbox"
+                 checked={checkBox.checked}
+                 onChange={checkBox.onChange} />
+          {checkBox.label}
+        </label>
+      </div>)
+}

frontend/src/components/common/PageTitle.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+type Props = { children: React.ReactNode }
+
+
+export default ({ children }: Props) => (
+    <h1 className="text-2xl font-bold mb-2">
+      {children}
+    </h1>)

frontend/src/components/common/SectionTitle.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+type Props = { children: React.ReactNode }
+
+
+export default ({ children }: Props) => (
+    <h2 className="text-xl my-4">
+      {children}
+    </h2>)

frontend/src/components/common/SubsectionTitle.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+type Props = { children: React.ReactNode }
+
+
+export default ({ children }: Props) => (
+    <h3 className="my-2">
+      {children}
+    </h3>)

frontend/src/components/common/TabGroup.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { cn } from '@/lib/utils'
 
 type TabProps = { name:     string
                   init?:    boolean
@@ -6,7 +7,7 @@ type TabProps = { name:     string
 
 type Props = { children: React.ReactElement<{ name: string }>[] }
 
-export const Tab = ({ children }: TabProps) => children
+export const Tab = ({ children }: TabProps) => <>{children}</>
 
 
 export default ({ children }: Props) => {
@@ -23,7 +24,7 @@ export default ({ children }: Props) => {
           {tabs.map ((tab, i) => (
               <a key={i}
                  href="#"
-                 className={`text-blue-400 hover:underline ${ i === current ? 'font-bold' : '' }`}
+                 className={cn (i === current && 'font-bold')}
                  onClick={ev => {
                    ev.preventDefault ()
                    setCurrent (i)