mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2026-01-15 09:24:37 +00:00
enhanced TabView
This commit is contained in:
parent
b2111b675e
commit
7d943126ab
@ -55,8 +55,8 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation
|
||||
return (
|
||||
<div role="tablist" className="tw-tabs tw-tabs-lifted tw-mt-2 tw-mb-2 tw-px-6">
|
||||
<input type="radio" name="my_tabs_2" role="tab"
|
||||
className={`tw-tab [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`}
|
||||
aria-label="👤" checked={activeTab == 1 && true}
|
||||
className={`tw-tab !tw-ps-3 !tw-pe-3 [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`}
|
||||
aria-label={`${item.layer?.itemType.icon_as_labels ? "📝" : "📝\u00A0Info"}`} checked={activeTab == 1 && true}
|
||||
onChange={() => updateActiveTab(1)} />
|
||||
<div role="tabpanel"
|
||||
className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto fade tw-pt-2 tw-pb-4 tw-mb-4 tw-overflow-x-hidden">
|
||||
@ -70,48 +70,48 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation
|
||||
{item.layer?.itemType.questlog &&
|
||||
<>
|
||||
<input type="radio" name="my_tabs_2" role="tab"
|
||||
className={`tw-tab [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`}
|
||||
aria-label="❤️" checked={activeTab == 2 && true}
|
||||
className={`tw-tab !tw-ps-3 !tw-pe-3 [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`}
|
||||
aria-label={`${item.layer?.itemType.icon_as_labels ? "❤️" : "❤️\u00A0Reputation"}`} checked={activeTab == 2 && true}
|
||||
onChange={() => updateActiveTab(2)} />
|
||||
|
||||
<div role="tabpanel"
|
||||
className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto fade tw-pt-2 tw-pb-4 tw-mb-4 tw-overflow-x-hidden">
|
||||
<table className="sm:tw-table-sm md:tw-table-md">
|
||||
<tbody>
|
||||
{attestations
|
||||
.filter(a => a.to.some(t => t.directus_users_id == item.user_created.id))
|
||||
.sort((a, b) => new Date(b.date_created).getTime() - new Date(a.date_created).getTime())
|
||||
.map((a, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<div className={`tw-cursor-pointer tw-text-3xl tw-mask tw-mask-${a.shape} tw-p-3 tw-mr-2 tw-shadow-xl tw-bg-[${a.color}]`}>
|
||||
{a.emoji}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className='tw-mr-2'><i>{a.text}</i></div>
|
||||
</td>
|
||||
<td>
|
||||
<Link to={"/item/" + getUserProfile(a.user_created.id)?.id}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="tw-avatar">
|
||||
<div className="tw-mask tw-rounded-full h-8 w-8 tw-mr-2">
|
||||
<img
|
||||
src={assetsApi.url + getUserProfile(a.user_created.id)?.image}
|
||||
alt="Avatar Tailwind CSS Component"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold">{getUserProfile(a.user_created.id)?.name}</div>
|
||||
<div className="tw-text-xs opacity-50 tw-text-zinc-500">{timeAgo(a.date_created)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tbody>
|
||||
{attestations
|
||||
.filter(a => a.to.some(t => t.directus_users_id == item.user_created.id))
|
||||
.sort((a, b) => new Date(b.date_created).getTime() - new Date(a.date_created).getTime())
|
||||
.map((a, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<div className={`tw-cursor-pointer tw-text-3xl tw-mask tw-mask-${a.shape} tw-p-3 tw-mr-2 tw-shadow-xl tw-bg-[${a.color}]`}>
|
||||
{a.emoji}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className='tw-mr-2'><i>{a.text}</i></div>
|
||||
</td>
|
||||
<td>
|
||||
<Link to={"/item/" + getUserProfile(a.user_created.id)?.id}>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="tw-avatar">
|
||||
<div className="tw-mask tw-rounded-full h-8 w-8 tw-mr-2">
|
||||
<img
|
||||
src={assetsApi.url + getUserProfile(a.user_created.id)?.image}
|
||||
alt="Avatar Tailwind CSS Component"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-bold">{getUserProfile(a.user_created.id)?.name}</div>
|
||||
<div className="tw-text-xs opacity-50 tw-text-zinc-500">{timeAgo(a.date_created)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
@ -121,7 +121,7 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation
|
||||
|
||||
<>
|
||||
|
||||
<input type="radio" name="my_tabs_2" role="tab" className="tw-tab [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]" aria-label="♻️" checked={activeTab == 3 && true} onChange={() => updateActiveTab(3)} />
|
||||
<input type="radio" name="my_tabs_2" role="tab" className={`tw-tab !tw-ps-3 !tw-pe-3 ${!item.layer?.itemType.icon_as_labels && "tw-min-w-[10em]"} [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`} aria-label={`${item.layer?.itemType.icon_as_labels ? "♻️" : "♻️\u00A0Offers & Needs"}`} checked={activeTab == 3 && true} onChange={() => updateActiveTab(3)} />
|
||||
<div role="tabpanel" className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-268px)] tw-overflow-y-auto fade tw-pt-4 tw-pb-1" >
|
||||
<div className='tw-h-full'>
|
||||
<div className='tw-grid tw-grid-cols-1'>
|
||||
@ -159,7 +159,7 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation
|
||||
|
||||
{item.layer?.itemType.relations &&
|
||||
<>
|
||||
<input type="radio" name="my_tabs_2" role="tab" className="tw-tab [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]" aria-label="🔗" checked={activeTab == 7 && true} onChange={() => updateActiveTab(7)} />
|
||||
<input type="radio" name="my_tabs_2" role="tab" className="tw-tab !tw-ps-3 !tw-pe-3 [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]" aria-label={`${item.layer?.itemType.icon_as_labels ? "🔗" : "🔗\u00A0Relations"}`} checked={activeTab == 7 && true} onChange={() => updateActiveTab(7)} />
|
||||
<div role="tabpanel" className="tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto tw-pt-4 tw-pb-1 -tw-mr-4 -tw-mb-4 tw-overflow-x-hidden">
|
||||
<div className='tw-h-full'>
|
||||
<div className='tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 md:tw-grid-cols-1 lg:tw-grid-cols-1 xl:tw-grid-cols-1 2xl:tw-grid-cols-2 tw-pb-4'>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user