Zero one ui

ReactでいろんなUIを作ります
`/`キーでページの移動やページ毎のコマンドを
実行するためのメニューを開くことができます

1.

todoリスト

浮いてるinputを使ったTodoリスト。 inputの隣のメニューがお気に入り。
PC
MOBILE
LAYOUT

2.

todoリスト2

表形式のtodoリスト。 テーブルの部分だけカードになっているのがお気に入り。
PC
LAYOUT

3.

変形するメニュー

youtubeの設定メニューを見て作りたくなった。
PC
MOBILE
PART

4.

チャット

DiscordみたいなUI。 設定ページを初めて作ったが、項目が多いとレイアウトが大変そうだなぁと思った。
PC
LAYOUT

5.

Dynamic Island

Dynamic Islandみたいなメニュー。 framer-motionでspring animationを使ってみた。
PC
MOBILE
PART

6.

ページトランジション

モバイルでよくありそうなページトランジションをWebで作ってみた。
PC
MOBILE
LAYOUT

7.

GitHub Project

GitHubのProjectsのレイアウトを作ってみた。初めてライブラリを使わないでDnDを実装した。
PC
LAYOUT
PRIME

8.

Audio Player

ブラウザ上で音楽を再生できるオーディオプレイヤーを作ってみた。
PC
MOBILE
PART

9.

Calendar

Google Calendarみたいなカレンダー。メインのカレンダーには日付操作ライブラリだけ使った。
PC
LAYOUT
PRIME

10.

TreeView

階層構造のデータを視覚的に表示するためのTreeViewコンポーネント。
PC
PART

11.

Todoist

Todoistのレイアウトを作ってみた。サイドバーにあるプロジェクトリストのDnDが難しかった。
PC
LAYOUT
WIP
PRIME