initial

src/components/Column.tsx

@@ -0,0 +1,34 @@
+import type { Component } from 'solid-js';
+
+type ColumnProps = {
+  width: 'wide' | 'medium' | 'narrow' | null | undefined;
+  children: JSX.Element;
+};
+
+const widthToClass = {
+  widest: 'w-[500px]',
+  wide: 'w-[350px]',
+  medium: 'w-[310px]',
+  narrow: 'w-[270px]',
+} as const;
+
+const Column: Component<ColumnProps> = (props) => {
+  const width = () => {
+    if (props.width == null) {
+      return widthToClass.medium;
+    }
+    return widthToClass[props.width];
+  };
+
+  return (
+    <div class={`h-full shrink-0 border-r ${width()}`}>
+      <div class="flex h-8 items-center border-b bg-white px-2">
+        <span class="column-icon">🏠</span>
+        <span class="column-name">Home</span>
+      </div>
+      <div class="h-full overflow-y-scroll pb-8">{props.children}</div>
+    </div>
+  );
+};
+
+export default Column;

src/components/NotePostForm.tsx

@@ -0,0 +1,36 @@
+import { createSignal } from 'solid-js';
+import type { Component } from 'solid-js';
+import PaperAirplane from 'heroicons/24/solid/paper-airplane.svg';
+
+const NotePostForm: Component = (props) => {
+  const [text, setText] = createSignal('');
+
+  const handleSubmit: JSX.EventHandler<HTMLFormElement, Event> = (ev) => {
+    ev.preventDefault(true);
+    props.onPost({ content: text() });
+  };
+
+  return (
+    <div class="p-1">
+      <form class="grid w-64 gap-1" onSubmit={handleSubmit}>
+        <textarea
+          name="text"
+          class="rounded border-none"
+          rows={4}
+          placeholder="いまどうしてる？"
+          onChange={(ev) => {
+            setText(ev.target.value);
+          }}
+          value={text()}
+        />
+        <div class="grid justify-end">
+          <button class="h-8 w-8 rounded bg-primary p-2 font-bold text-white" type="submit">
+            <PaperAirplane />
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default NotePostForm;

src/components/SideBar.tsx

@@ -0,0 +1,33 @@
+import { createSignal, Show } from 'solid-js';
+import type { Component } from 'solid-js';
+import MagnifyingGlass from 'heroicons/24/solid/magnifying-glass.svg';
+import PencilSquare from 'heroicons/24/solid/pencil-square.svg';
+
+type SideBarProps = {
+  postForm: () => JSX.Element;
+};
+
+const SideBar: Component<SideBarProps> = (props) => {
+  const [formOpened, setFormOpened] = createSignal(true);
+
+  return (
+    <div class="flex shrink-0 flex-row border-r bg-sidebar-bg">
+      <div class="flex w-14 flex-auto flex-col items-center gap-3 border-r py-5">
+        <button
+          class={`h-9 w-9 rounded-full border border-primary bg-primary p-2 text-2xl font-bold text-white`}
+          onClick={() => setFormOpened((current) => !current)}
+        >
+          <PencilSquare />
+        </button>
+        <button class="h-9 w-9 rounded-full border border-primary p-2 text-2xl font-bold text-primary">
+          <MagnifyingGlass />
+        </button>
+        <div>column 1</div>
+        <div>column 2</div>
+      </div>
+      <Show when={formOpened()}>{() => props.postForm()}</Show>
+    </div>
+  );
+};
+
+export default SideBar;

src/components/TextNote.tsx

@@ -0,0 +1,34 @@
+import type { Component } from 'solid-js';
+
+export type TextNoteProps = {
+  content: string;
+  createdAt: Date;
+};
+
+const TextNote: Component<TextNoteProps> = (props) => {
+  return (
+    <div class="textnote flex w-full flex-row gap-1 overflow-hidden border-b p-1">
+      <div class="author-icon shrink-0">
+        <img
+          src="https://i.gyazo.com/883119a7763e594d30c5706a62969d52.jpg"
+          alt="author icon"
+          // TODO autofit
+          class="w-10 rounded"
+        />
+      </div>
+      <div class="min-w-0 flex-auto">
+        <div class="flex justify-between gap-1 text-xs">
+          <div class="author flex min-w-0">
+            {/* TODO link to profile */}
+            <div class="author-name font-bold">Author</div>
+            <div class="author-username truncate pl-1">@aauthorauthorauthorauthorauthoruthor</div>
+          </div>
+          <div class="created-at shrink-0">{props.createdAt.toLocaleTimeString()}</div>
+        </div>
+        <div class="content whitespace-pre-wrap break-all">{props.content}</div>
+      </div>
+    </div>
+  );
+};
+
+export default TextNote;