mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
add active link
This commit is contained in:
parent
d5dd049f43
commit
740dc85f13
@ -38,6 +38,7 @@
|
|||||||
"react-string-replace": "^1.1.0",
|
"react-string-replace": "^1.1.0",
|
||||||
"react-virtuoso": "^4.3.1",
|
"react-virtuoso": "^4.3.1",
|
||||||
"swr": "^2.1.4",
|
"swr": "^2.1.4",
|
||||||
|
"tailwind-merge": "^1.12.0",
|
||||||
"tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql"
|
"tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
@ -48,6 +48,7 @@ specifiers:
|
|||||||
react-string-replace: ^1.1.0
|
react-string-replace: ^1.1.0
|
||||||
react-virtuoso: ^4.3.1
|
react-virtuoso: ^4.3.1
|
||||||
swr: ^2.1.4
|
swr: ^2.1.4
|
||||||
|
tailwind-merge: ^1.12.0
|
||||||
tailwindcss: ^3.3.1
|
tailwindcss: ^3.3.1
|
||||||
tauri-plugin-sql-api: github:tauri-apps/tauri-plugin-sql
|
tauri-plugin-sql-api: github:tauri-apps/tauri-plugin-sql
|
||||||
typescript: ^4.9.5
|
typescript: ^4.9.5
|
||||||
@ -82,6 +83,7 @@ dependencies:
|
|||||||
react-string-replace: 1.1.0
|
react-string-replace: 1.1.0
|
||||||
react-virtuoso: 4.3.1_biqbaboplfbrettd7655fr4n2y
|
react-virtuoso: 4.3.1_biqbaboplfbrettd7655fr4n2y
|
||||||
swr: 2.1.4_react@18.2.0
|
swr: 2.1.4_react@18.2.0
|
||||||
|
tailwind-merge: 1.12.0
|
||||||
tauri-plugin-sql-api: github.com/tauri-apps/tauri-plugin-sql/62b21ef24303d80e9905f57b2b6d27efc8677c23
|
tauri-plugin-sql-api: github.com/tauri-apps/tauri-plugin-sql/62b21ef24303d80e9905f57b2b6d27efc8677c23
|
||||||
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
@ -4433,6 +4435,11 @@ packages:
|
|||||||
use-sync-external-store: 1.2.0_react@18.2.0
|
use-sync-external-store: 1.2.0_react@18.2.0
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/tailwind-merge/1.12.0:
|
||||||
|
resolution:
|
||||||
|
{ integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g== }
|
||||||
|
dev: false
|
||||||
|
|
||||||
/tailwindcss/3.3.1_postcss@8.4.23:
|
/tailwindcss/3.3.1_postcss@8.4.23:
|
||||||
resolution:
|
resolution:
|
||||||
{ integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g== }
|
{ integrity: sha512-Vkiouc41d4CEq0ujXl6oiGFQ7bA3WEhUZdTgXAhtKxSy49OmKs8rEfQmupsfF0IGW8fv2iQkp1EVUuapCFrZ9g== }
|
||||||
|
32
src/components/activeLink.tsx
Normal file
32
src/components/activeLink.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { usePageContext } from '@utils/hooks/usePageContext';
|
||||||
|
|
||||||
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
|
export function ActiveLink({
|
||||||
|
href,
|
||||||
|
className,
|
||||||
|
activeClassName,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
href: string;
|
||||||
|
className: string;
|
||||||
|
activeClassName: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const pageContext = usePageContext();
|
||||||
|
const pathName = pageContext.urlPathname;
|
||||||
|
|
||||||
|
let newClassName = '';
|
||||||
|
|
||||||
|
if (href === pathName) {
|
||||||
|
newClassName = activeClassName;
|
||||||
|
} else {
|
||||||
|
newClassName = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<a href={href} className={twMerge(className, newClassName)}>
|
||||||
|
{children}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
@ -1,20 +1,34 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||||
|
|
||||||
import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
|
import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
|
||||||
|
import { usePageContext } from '@utils/hooks/usePageContext';
|
||||||
|
|
||||||
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
export const ChannelListItem = ({ data }: { data: any }) => {
|
export const ChannelListItem = ({ data }: { data: any }) => {
|
||||||
const channel = useChannelMetadata(data.event_id, data.metadata);
|
const channel = useChannelMetadata(data.event_id, data.metadata);
|
||||||
|
const pageContext = usePageContext();
|
||||||
|
|
||||||
|
const searchParams: any = pageContext.urlParsed.search;
|
||||||
|
const pageID = searchParams.id;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
href={`/channel?id=${data.event_id}`}
|
href={`/channel?id=${data.event_id}`}
|
||||||
className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
|
className={twMerge(
|
||||||
|
'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900',
|
||||||
|
pageID === data.event_id ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<div className="relative h-5 w-5 shrink-0 rounded">
|
<div className="relative h-5 w-5 shrink-0 rounded">
|
||||||
<img src={channel?.picture || DEFAULT_AVATAR} alt={data.event_id} className="h-5 w-5 rounded object-cover" />
|
<img
|
||||||
|
src={channel?.picture || DEFAULT_AVATAR}
|
||||||
|
alt={data.event_id}
|
||||||
|
className="h-5 w-5 rounded bg-zinc-900 object-cover"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h5 className="truncate text-sm font-medium text-zinc-400">{channel?.name.toLowerCase()}</h5>
|
<h5 className="truncate text-sm font-medium text-zinc-400">{channel?.name}</h5>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
|
@ -1,15 +1,25 @@
|
|||||||
import { DEFAULT_AVATAR } from '@stores/constants';
|
import { DEFAULT_AVATAR } from '@stores/constants';
|
||||||
|
|
||||||
|
import { usePageContext } from '@utils/hooks/usePageContext';
|
||||||
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
|
import { useProfileMetadata } from '@utils/hooks/useProfileMetadata';
|
||||||
import { shortenKey } from '@utils/shortenKey';
|
import { shortenKey } from '@utils/shortenKey';
|
||||||
|
|
||||||
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
|
export const ChatListItem = ({ pubkey }: { pubkey: string }) => {
|
||||||
const profile = useProfileMetadata(pubkey);
|
const profile = useProfileMetadata(pubkey);
|
||||||
|
const pageContext = usePageContext();
|
||||||
|
|
||||||
|
const searchParams: any = pageContext.urlParsed.search;
|
||||||
|
const pagePubkey = searchParams.pubkey;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a
|
<a
|
||||||
href={`/chat?pubkey=${pubkey}`}
|
href={`/chat?pubkey=${pubkey}`}
|
||||||
className="inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900"
|
className={twMerge(
|
||||||
|
'inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-900',
|
||||||
|
pagePubkey === pubkey ? 'dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800' : ''
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<div className="relative h-5 w-5 shrink rounded">
|
<div className="relative h-5 w-5 shrink rounded">
|
||||||
<img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-5 w-5 rounded object-cover" />
|
<img src={profile?.picture || DEFAULT_AVATAR} alt={pubkey} className="h-5 w-5 rounded object-cover" />
|
||||||
|
@ -1,12 +0,0 @@
|
|||||||
import { usePageContext } from '@utils/hooks/usePageContext';
|
|
||||||
|
|
||||||
import { AnchorHTMLAttributes, ClassAttributes } from 'react';
|
|
||||||
|
|
||||||
export function Link(
|
|
||||||
props: JSX.IntrinsicAttributes & ClassAttributes<HTMLAnchorElement> & AnchorHTMLAttributes<HTMLAnchorElement>,
|
|
||||||
activeClass: string
|
|
||||||
) {
|
|
||||||
const pageContext = usePageContext();
|
|
||||||
const className = [props.className, pageContext.urlPathname === props.href && activeClass].filter(Boolean).join(' ');
|
|
||||||
return <a {...props} className={className} />;
|
|
||||||
}
|
|
@ -1,3 +1,5 @@
|
|||||||
|
import { ActiveLink } from '@components/activeLink';
|
||||||
|
|
||||||
import * as Collapsible from '@radix-ui/react-collapsible';
|
import * as Collapsible from '@radix-ui/react-collapsible';
|
||||||
import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
|
import { Bonfire, NavArrowUp, PeopleTag } from 'iconoir-react';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
@ -19,22 +21,22 @@ export default function Newsfeed() {
|
|||||||
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Newsfeed</h3>
|
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Newsfeed</h3>
|
||||||
</Collapsible.Trigger>
|
</Collapsible.Trigger>
|
||||||
<Collapsible.Content className="flex flex-col text-zinc-400">
|
<Collapsible.Content className="flex flex-col text-zinc-400">
|
||||||
<a
|
<ActiveLink
|
||||||
href="/newsfeed/following"
|
href="/newsfeed/following"
|
||||||
//activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
|
|
||||||
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
|
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
|
||||||
|
activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
|
||||||
>
|
>
|
||||||
<PeopleTag width={16} height={16} className="text-zinc-500" />
|
<PeopleTag width={16} height={16} className="text-zinc-500" />
|
||||||
<span>Following</span>
|
<span>Following</span>
|
||||||
</a>
|
</ActiveLink>
|
||||||
<a
|
<ActiveLink
|
||||||
href="/newsfeed/circle"
|
href="/newsfeed/circle"
|
||||||
//activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
|
|
||||||
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
|
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-sm font-medium hover:text-zinc-200"
|
||||||
|
activeClassName="dark:bg-zinc-900 dark:text-zinc-100 hover:dark:bg-zinc-800"
|
||||||
>
|
>
|
||||||
<Bonfire width={16} height={16} className="text-zinc-500" />
|
<Bonfire width={16} height={16} className="text-zinc-500" />
|
||||||
<span>Circle</span>
|
<span>Circle</span>
|
||||||
</a>
|
</ActiveLink>
|
||||||
</Collapsible.Content>
|
</Collapsible.Content>
|
||||||
</div>
|
</div>
|
||||||
</Collapsible.Root>
|
</Collapsible.Root>
|
||||||
|
Loading…
Reference in New Issue
Block a user