reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[wip] added channel explore page

Browse Source
This commit is contained in:
Ren Amamiya
2023-04-19 15:24:52 +07:00
parent dd0c794ebc
commit e6b6ab38e0
6 changed files with 119 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/channels/browseChannelItem.tsx
View File

@@ -1,6 +1,6 @@
import { ImageWithFallback } from '@components/imageWithFallback';
import { DEFAULT_AVATAR } from '@stores/constants';
import { DEFAULT_AVATAR, DEFAULT_CHANNEL_BANNER } from '@stores/constants';
import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
@@ -19,26 +19,32 @@ export const BrowseChannelItem = ({ data }: { data: any }) => {
);
return (
<div
onClick={() => openChannel(data.event_id)}
className="group relative flex items-center gap-2 border-b border-zinc-800 px-3 py-2.5 hover:bg-black/20"
>
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md border border-white/10">
<ImageWithFallback
src={channel?.picture || DEFAULT_AVATAR}
alt={data.id}
fill={true}
className="rounded-md object-cover"
/>
<div className="h-64 w-full rounded-md bg-zinc-900">
<div className="relative h-24">
<div className="h-24 w-full rounded-t-md bg-zinc-800">
<ImageWithFallback
src={channel?.banner || DEFAULT_CHANNEL_BANNER}
alt={data.id}
fill={true}
className="h-full w-full rounded-t-md object-cover"
/>
</div>
<div className="relative -top-6 z-10 px-4">
<div className="relative h-11 w-11 rounded-md bg-white">
<ImageWithFallback
src={channel?.picture || DEFAULT_AVATAR}
alt={data.id}
fill={true}
className="rounded-md object-cover ring-1 ring-black/50"
/>
</div>
</div>
</div>
<div className="flex w-full flex-1 flex-col items-start text-start">
<span className="truncate font-medium leading-tight text-zinc-200">{channel?.name}</span>
<span className="text-sm leading-tight text-zinc-400">{channel?.about}</span>
</div>
<div className="absolute right-2 top-1/2 hidden -translate-y-1/2 transform group-hover:inline-flex">
<button className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-sm font-medium shadow-button hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50">
Join
</button>
<div className="mt-7 px-4">
<div className="flex flex-col">
<h3 className="w-full truncate font-semibold leading-tight text-zinc-100">{channel?.name}</h3>
</div>
<div className="line-clamp-3 text-sm text-zinc-400">{channel?.about}</div>
</div>
</div>
);

2
src/components/channels/channelList.tsx
View File

@@ -11,7 +11,7 @@ export default function ChannelList() {
return (
<div className="flex flex-col gap-px">
<Link
href="/nostr/channels"
href="/explore/channels"
className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
>
<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900 group-hover:bg-zinc-800">