aljaz/rabbit
1
0
Fork 0
mirror of https://github.com/aljazceru/rabbit.git synced 2025-12-17 14:04:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: add column

Browse Source
This commit is contained in:
Shusui MOYATANI
2024-02-22 01:25:36 +09:00
parent 788bc73ceb
commit 9472738f90
1 changed files with 47 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/components/modal/AddColumn.tsx
View File

@@ -1,4 +1,4 @@
import { Component } from 'solid-js'; import { Component, For } from 'solid-js';
import Bell from 'heroicons/24/outline/bell.svg'; import Bell from 'heroicons/24/outline/bell.svg';
import GlobeAlt from 'heroicons/24/outline/globe-alt.svg'; import GlobeAlt from 'heroicons/24/outline/globe-alt.svg';
@@ -77,85 +77,55 @@ const AddColumn: Component<AddColumnProps> = (props) => {
finish(); finish();
}; };
const menu = [
{
name: () => i18n.t('column.home'),
icon: () => <Home />,
onClick: addFollowingColumn,
},
{
name: () => i18n.t('column.notification'),
icon: () => <Bell />,
onClick: addNotificationColumn,
},
{
name: () => i18n.t('column.japanese'),
icon: () => <GlobeAlt />,
onClick: addJapanRelaysColumn,
},
{
name: () => i18n.t('column.search'),
icon: () => <MagnifyingGlass />,
onClick: addSearchColumn,
},
{
name: () => i18n.t('column.myPosts'),
icon: () => <User />,
onClick: addMyPostsColumn,
},
{
name: () => i18n.t('column.myReactions'),
icon: () => <Heart />,
onClick: addMyReactionsColumn,
},
// TODO channel <ChatBubbleLeftRight />
// TODO bookmark <BookmarkIcon />
];
return ( return (
<BasicModal onClose={props.onClose}> <BasicModal onClose={props.onClose}>
<div class="flex flex-wrap p-4"> <div class="flex flex-wrap p-4">
<For each={menu}>
{(menuItem) => (
<button <button
class="flex basis-1/2 flex-col items-center gap-2 py-8 hover:text-primary sm:basis-1/4" class="flex basis-1/2 flex-col items-center gap-2 py-8 hover:text-primary sm:basis-1/4"
onClick={() => addFollowingColumn()} onClick={menuItem.onClick}
> >
<span class="inline-block size-8"> <span class="inline-block size-8">{menuItem.icon()}</span>
<Home /> {menuItem.name()}
</span>
{i18n.t('column.home')}
</button>
<button
class="flex basis-1/2 flex-col items-center gap-2 py-8 hover:text-primary sm:basis-1/4"
onClick={() => addNotificationColumn()}
>
<span class="inline-block size-8">
<Bell />
</span>
{i18n.t('column.notification')}
</button>
<button
class="flex basis-1/2 flex-col items-center gap-2 py-8 hover:text-primary sm:basis-1/4"
onClick={() => addJapanRelaysColumn()}
>
<span class="inline-block size-8">
<GlobeAlt />
</span>
{i18n.t('column.japanese')}
</button>
{/*
<button
class="flex basis-1/2 flex-col items-center gap-2 py-8 sm:basis-1/4"
onClick={() => window.alert()}
>
<span class="inline-block size-8">
<ChatBubbleLeftRight />
</span>
チャンネル
</button>
*/}
{/*
<button
class="flex basis-1/2 flex-col items-center gap-2 py-8 sm:basis-1/4"
onClick={() => addBookmarkColumn()}
>
<span class="inline-block size-8">
<BookmarkIcon />
</span>
ブックマーク
</button>
*/}
<button
class="flex basis-1/2 flex-col items-center gap-2 py-8 hover:text-primary sm:basis-1/4"
onClick={() => addSearchColumn()}
>
<span class="inline-block size-8">
<MagnifyingGlass />
</span>
{i18n.t('column.search')}
</button>
<button
class="flex basis-1/2 flex-col items-center gap-2 py-8 hover:text-primary sm:basis-1/4"
onClick={() => addMyPostsColumn()}
>
<span class="inline-block size-8">
<User />
</span>
{i18n.t('column.myPosts')}
</button>
<button
class="flex basis-1/2 flex-col items-center gap-2 py-8 hover:text-primary sm:basis-1/4"
onClick={() => addMyReactionsColumn()}
>
<span class="inline-block size-8">
<Heart />
</span>
{i18n.t('column.myReactions')}
</button> </button>
)}
</For>
</div> </div>
</BasicModal> </BasicModal>
); );