mirror of
https://github.com/luminous-devs/lume.git
synced 2024-10-01 01:10:48 +00:00
feat: redesign column header
This commit is contained in:
parent
763ace5ddf
commit
d527078d5c
@ -1,5 +1,5 @@
|
|||||||
import {
|
import {
|
||||||
HorizontalDotsIcon,
|
ChevronDownIcon,
|
||||||
MoveLeftIcon,
|
MoveLeftIcon,
|
||||||
MoveRightIcon,
|
MoveRightIcon,
|
||||||
RefreshIcon,
|
RefreshIcon,
|
||||||
@ -43,78 +43,73 @@ export function ColumnHeader({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center justify-between w-full px-3 border-b h-11 shrink-0 border-neutral-100 dark:border-neutral-900">
|
<DropdownMenu.Root>
|
||||||
<div className="inline-flex items-center gap-4">
|
<div className="flex items-center justify-center gap-2 px-3 w-full border-b h-11 shrink-0 border-neutral-100 dark:border-neutral-900">
|
||||||
<div className="inline-flex items-center flex-1 gap-2 text-neutral-800 dark:text-neutral-200">
|
<DropdownMenu.Trigger asChild>
|
||||||
{icon ? icon : <ThreadIcon className="size-4" />}
|
<div className="inline-flex items-center gap-3">
|
||||||
<div className="text-sm font-medium">{title}</div>
|
<div className="inline-flex items-center gap-2">
|
||||||
</div>
|
<div className="text-[13px] font-medium">{title}</div>
|
||||||
|
<ChevronDownIcon className="size-5 mt-px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DropdownMenu.Trigger>
|
||||||
|
<DropdownMenu.Portal>
|
||||||
|
<DropdownMenu.Content
|
||||||
|
sideOffset={5}
|
||||||
|
className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-white/50 dark:bg-black/50 ring-1 ring-black/10 dark:ring-white/10 backdrop-blur-2xl focus:outline-none"
|
||||||
|
>
|
||||||
|
<DropdownMenu.Item asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={refresh}
|
||||||
|
className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<RefreshIcon className="size-4" />
|
||||||
|
Refresh
|
||||||
|
</button>
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
{queryKey?.[0] === "foryou-9998" ? (
|
||||||
|
<DropdownMenu.Item asChild>
|
||||||
|
<InterestModal
|
||||||
|
queryKey={queryKey}
|
||||||
|
className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
|
||||||
|
/>
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
) : null}
|
||||||
|
<DropdownMenu.Item asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={moveLeft}
|
||||||
|
className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<MoveLeftIcon className="size-4" />
|
||||||
|
Move left
|
||||||
|
</button>
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Item asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={moveRight}
|
||||||
|
className="inline-flex items-center gap-3 px-3 text-sm font-medium rounded-lg h-9 text-black/70 hover:bg-black/10 hover:text-black focus:outline-none dark:text-white/70 dark:hover:bg-white/10 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<MoveRightIcon className="size-4" />
|
||||||
|
Move right
|
||||||
|
</button>
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
<DropdownMenu.Separator className="h-px my-1 bg-white/10 dark:bg-black/10" />
|
||||||
|
<DropdownMenu.Item asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={deleteWidget}
|
||||||
|
className="inline-flex items-center gap-3 px-3 text-sm font-medium text-red-500 rounded-lg h-9 hover:bg-red-500 hover:text-red-50 focus:outline-none"
|
||||||
|
>
|
||||||
|
<TrashIcon className="size-4" />
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Portal>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
</DropdownMenu.Root>
|
||||||
<DropdownMenu.Root>
|
|
||||||
<DropdownMenu.Trigger asChild>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="inline-flex items-center justify-center w-6 h-6"
|
|
||||||
>
|
|
||||||
<HorizontalDotsIcon className="size-4" />
|
|
||||||
</button>
|
|
||||||
</DropdownMenu.Trigger>
|
|
||||||
<DropdownMenu.Portal>
|
|
||||||
<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-2xl bg-black/70 dark:bg-white/10 backdrop-blur-xl focus:outline-none">
|
|
||||||
<DropdownMenu.Item asChild>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={refresh}
|
|
||||||
className="inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
<RefreshIcon className="size-5" />
|
|
||||||
Refresh
|
|
||||||
</button>
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
{queryKey?.[0] === "foryou-9998" ? (
|
|
||||||
<DropdownMenu.Item asChild>
|
|
||||||
<InterestModal
|
|
||||||
queryKey={queryKey}
|
|
||||||
className="text-sm font-medium text-white/50 hover:bg-black/10 hover:text-white dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
|
|
||||||
/>
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
) : null}
|
|
||||||
<DropdownMenu.Item asChild>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={moveLeft}
|
|
||||||
className="inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
<MoveLeftIcon className="size-5" />
|
|
||||||
Move left
|
|
||||||
</button>
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Item asChild>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={moveRight}
|
|
||||||
className="inline-flex items-center gap-2 px-3 text-sm font-medium rounded-lg h-9 text-white/50 hover:bg-black/10 hover:text-white focus:outline-none dark:text-white/50 dark:hover:bg-white/10 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
<MoveRightIcon className="size-5" />
|
|
||||||
Move right
|
|
||||||
</button>
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
<DropdownMenu.Separator className="h-px my-1 bg-white/10 dark:bg-black/10" />
|
|
||||||
<DropdownMenu.Item asChild>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={deleteWidget}
|
|
||||||
className="inline-flex items-center gap-2 px-3 text-sm font-medium text-red-300 rounded-lg h-9 hover:bg-red-500 hover:text-red-50 focus:outline-none"
|
|
||||||
>
|
|
||||||
<TrashIcon className="size-5" />
|
|
||||||
Delete
|
|
||||||
</button>
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Portal>
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -56,7 +56,7 @@ export function InterestModal({
|
|||||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||||
<Dialog.Trigger
|
<Dialog.Trigger
|
||||||
className={cn(
|
className={cn(
|
||||||
"inline-flex items-center gap-2 px-3 rounded-lg h-9 focus:outline-none",
|
"inline-flex items-center gap-3 px-3 rounded-lg h-9 focus:outline-none",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
@ -64,7 +64,7 @@ export function InterestModal({
|
|||||||
children
|
children
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<EditInterestIcon className="size-5" />
|
<EditInterestIcon className="size-4" />
|
||||||
Edit interest
|
Edit interest
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { ChevronUpIcon } from "@lume/icons";
|
import { ArrowUpIcon, ChevronUpIcon } from "@lume/icons";
|
||||||
import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
|
import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useArk } from "../../hooks/useArk";
|
import { useArk } from "../../hooks/useArk";
|
||||||
@ -34,14 +34,14 @@ export function ColumnLiveWidget({
|
|||||||
if (!events.length) return null;
|
if (!events.length) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="absolute left-0 z-50 flex items-center justify-center w-full top-11 h-11">
|
<div className="absolute left-0 z-40 flex items-center justify-center w-full top-12 h-11">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={update}
|
onClick={update}
|
||||||
className="inline-flex items-center justify-center h-8 gap-1 pl-2 pr-2.5 text-sm font-semibold rounded-full w-max bg-neutral-950 dark:bg-neutral-50 hover:bg-neutral-900 dark:hover:bg-neutral-100 text-neutral-50 dark:text-neutral-950"
|
className="inline-flex items-center justify-center h-9 gap-1 pl-4 pr-3 text-sm font-semibold rounded-full w-max bg-neutral-950 dark:bg-neutral-50 hover:bg-neutral-900 dark:hover:bg-neutral-100 text-neutral-50 dark:text-neutral-950"
|
||||||
>
|
>
|
||||||
<ChevronUpIcon className="w-4 h-4" />
|
|
||||||
{events.length} {events.length === 1 ? "new note" : "new notes"}
|
{events.length} {events.length === 1 ? "new note" : "new notes"}
|
||||||
|
<ArrowUpIcon className="size-4" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -111,3 +111,4 @@ export * from "./src/foryou";
|
|||||||
export * from "./src/editInterest";
|
export * from "./src/editInterest";
|
||||||
export * from "./src/newColumn";
|
export * from "./src/newColumn";
|
||||||
export * from "./src/searchFilled";
|
export * from "./src/searchFilled";
|
||||||
|
export * from "./src/arrowUp";
|
||||||
|
24
packages/icons/src/arrowUp.tsx
Normal file
24
packages/icons/src/arrowUp.tsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { SVGProps } from "react";
|
||||||
|
|
||||||
|
export function ArrowUpIcon(
|
||||||
|
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="M6 9.83a30.23 30.23 0 015.406-5.62A.949.949 0 0112 4m6 5.83a30.233 30.233 0 00-5.406-5.62A.949.949 0 0012 4m0 0v16"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
@ -17,7 +17,7 @@ export function ChevronDownIcon(
|
|||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
strokeWidth="2"
|
strokeWidth="2"
|
||||||
d="M8 10.14a20.36 20.36 0 003.702 3.893c.175.141.42.141.596 0A20.361 20.361 0 0016 10.14"
|
d="M6 9a30.618 30.618 0 005.49 5.817c.3.244.72.244 1.02 0A30.617 30.617 0 0018 9"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
@ -1,22 +1,24 @@
|
|||||||
import { SVGProps } from 'react';
|
import { SVGProps } from "react";
|
||||||
|
|
||||||
export function ChevronUpIcon(props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>) {
|
export function ChevronUpIcon(
|
||||||
return (
|
props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
|
||||||
<svg
|
) {
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
return (
|
||||||
width="24"
|
<svg
|
||||||
height="24"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
fill="none"
|
width="24"
|
||||||
viewBox="0 0 24 24"
|
height="24"
|
||||||
{...props}
|
fill="none"
|
||||||
>
|
viewBox="0 0 24 24"
|
||||||
<path
|
{...props}
|
||||||
stroke="currentColor"
|
>
|
||||||
strokeLinecap="round"
|
<path
|
||||||
strokeLinejoin="round"
|
stroke="currentColor"
|
||||||
strokeWidth="1.5"
|
strokeLinecap="round"
|
||||||
d="M8 14l3.646-3.646a.5.5 0 01.708 0L16 14"
|
strokeLinejoin="round"
|
||||||
></path>
|
strokeWidth="2"
|
||||||
</svg>
|
d="M6 15a30.617 30.617 0 015.49-5.817.803.803 0 011.02 0A30.616 30.616 0 0118 15"
|
||||||
);
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
@ -30,7 +30,7 @@ export function Timeline({ column }: { column: IColumn }) {
|
|||||||
id={column.id}
|
id={column.id}
|
||||||
queryKey={[colKey]}
|
queryKey={[colKey]}
|
||||||
title="Timeline"
|
title="Timeline"
|
||||||
icon={<TimelineIcon className="size-4" />}
|
icon={<TimelineIcon className="size-5" />}
|
||||||
/>
|
/>
|
||||||
{ark.account.contacts.length ? (
|
{ark.account.contacts.length ? (
|
||||||
<Column.Live
|
<Column.Live
|
||||||
|
Loading…
Reference in New Issue
Block a user