mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
update widgets
This commit is contained in:
parent
45c5a890b9
commit
09aea3cff5
@ -118,10 +118,11 @@ export function OnboardStep3Screen() {
|
|||||||
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
<LoaderIcon className="h-4 w-4 animate-spin text-white" />
|
||||||
</div>
|
</div>
|
||||||
) : relaysAsArray.length === 0 ? (
|
) : relaysAsArray.length === 0 ? (
|
||||||
<div className="flex h-full w-full items-center justify-center">
|
<div className="flex h-full w-full items-center justify-center px-6">
|
||||||
<p className="text-center text-white/50">
|
<p className="text-center text-white/50">
|
||||||
Can't found any relays, you can skip this step and use default relays
|
Lume couldn't find any relays from your follows.
|
||||||
instead
|
<br />
|
||||||
|
You can skip this step and use default relays instead.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
@ -145,7 +146,7 @@ export function OnboardStep3Screen() {
|
|||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
{relays.size > 5 && (
|
{relays.size > 5 && (
|
||||||
<div className="sticky bottom-0 left-0 inline-flex w-full items-center justify-center bg-white/10 px-4 py-2 backdrop-blur-2xl backdrop-blur-xl">
|
<div className="sticky bottom-0 left-0 inline-flex w-full items-center justify-center bg-white/10 px-4 py-2 backdrop-blur-2xl">
|
||||||
<p className="text-sm text-orange-400">
|
<p className="text-sm text-orange-400">
|
||||||
Using too much relay can cause high resource usage
|
Using too much relay can cause high resource usage
|
||||||
</p>
|
</p>
|
||||||
|
@ -25,11 +25,12 @@ export function WidgetList({ params }: { params: Widget }) {
|
|||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
<h3 className="font-medium text-white/50">{row.title}</h3>
|
<h3 className="font-medium text-white/50">{row.title}</h3>
|
||||||
<div className="grid grid-cols-3 gap-6">
|
<div className="flex flex-col divide-y divide-white/5 overflow-hidden rounded-xl bg-white/10">
|
||||||
{row.data.map((item, index) => (
|
{row.data.map((item, index) => (
|
||||||
<button onClick={() => openWidget(item)} key={index}>
|
<button onClick={() => openWidget(item)} key={index}>
|
||||||
<div className="inline-flex aspect-square h-full w-full transform-gpu flex-col items-center justify-center gap-2.5 rounded-2xl bg-white/5 hover:bg-white/10">
|
<div className="inline-flex h-14 w-full flex-col items-start justify-center gap-1 px-4 hover:bg-white/10">
|
||||||
<h5 className="text-sm font-medium">{item.title}</h5>
|
<h5 className="font-medium leading-none">{item.title}</h5>
|
||||||
|
<p className="text-xs leading-none text-white/50">{item.description}</p>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
))}
|
))}
|
||||||
@ -41,11 +42,27 @@ export function WidgetList({ params }: { params: Widget }) {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative h-full shrink-0 grow-0 basis-[400px] overflow-hidden">
|
<div className="relative h-full shrink-0 grow-0 basis-[400px] overflow-hidden bg-white/10">
|
||||||
<TitleBar id={params.id} title="Add widget" />
|
<TitleBar id={params.id} title="Add widget" />
|
||||||
<div className="flex flex-col gap-8 px-3">
|
<div className="flex flex-col gap-8 px-3">
|
||||||
{DefaultWidgets.map((row: WidgetGroup) => renderItem(row))}
|
{DefaultWidgets.map((row: WidgetGroup) => renderItem(row))}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mt-6 px-3">
|
||||||
|
<div className="border-t border-white/5 pt-6">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
disabled
|
||||||
|
className="inline-flex h-14 w-full items-center justify-center gap-2.5 rounded-xl bg-white/5 text-sm font-medium text-white/50"
|
||||||
|
>
|
||||||
|
Build your own widget{' '}
|
||||||
|
<div className="-rotate-3 transform rounded-md bg-white/10 px-1.5 py-1">
|
||||||
|
<span className="bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300 bg-clip-text text-xs text-transparent">
|
||||||
|
Coming soon
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -125,7 +125,7 @@ export function Composer() {
|
|||||||
autoCapitalize="off"
|
autoCapitalize="off"
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
'scrollbar-hide markdown max-h-[500px] overflow-y-auto break-all pr-2 outline-none',
|
'scrollbar-hide markdown max-h-[500px] overflow-y-auto break-all pr-2 outline-none',
|
||||||
expand ? 'min-h-[500px]' : 'min-h-[120px]'
|
expand ? 'min-h-[500px]' : reply.id ? 'min-h-min' : 'min-h-[120px]'
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
{reply.id && (
|
{reply.id && (
|
||||||
|
@ -46,18 +46,22 @@ export const DefaultWidgets = [
|
|||||||
{
|
{
|
||||||
kind: WidgetKinds.tmp.xfeed,
|
kind: WidgetKinds.tmp.xfeed,
|
||||||
title: 'Group feeds',
|
title: 'Group feeds',
|
||||||
|
description: 'All posts from specific people you want to keep up with',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: WidgetKinds.local.files,
|
kind: WidgetKinds.local.files,
|
||||||
title: 'Files',
|
title: 'Files',
|
||||||
|
description: 'All files shared by people in your network',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: WidgetKinds.local.articles,
|
kind: WidgetKinds.local.articles,
|
||||||
title: 'Articles',
|
title: 'Articles',
|
||||||
|
description: 'All articles shared by people in your network',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: WidgetKinds.local.follows,
|
kind: WidgetKinds.local.follows,
|
||||||
title: 'Follows',
|
title: 'Follows',
|
||||||
|
description: 'All posts from people you are following',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@ -67,27 +71,32 @@ export const DefaultWidgets = [
|
|||||||
{
|
{
|
||||||
kind: WidgetKinds.tmp.xhashtag,
|
kind: WidgetKinds.tmp.xhashtag,
|
||||||
title: 'Hashtag',
|
title: 'Hashtag',
|
||||||
|
description: 'All posts have a specific hashtag',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: WidgetKinds.global.files,
|
kind: WidgetKinds.global.files,
|
||||||
title: 'Files',
|
title: 'Files',
|
||||||
|
description: 'All files shared by people in your current relay set',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: WidgetKinds.global.articles,
|
kind: WidgetKinds.global.articles,
|
||||||
title: 'Articles',
|
title: 'Articles',
|
||||||
|
description: 'All articles shared by people in your current relay set',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Trending (nostr.band)',
|
title: 'nostr.band',
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
kind: WidgetKinds.nostrBand.trendingAccounts,
|
kind: WidgetKinds.nostrBand.trendingAccounts,
|
||||||
title: 'Accounts',
|
title: 'Accounts',
|
||||||
|
description: 'Trending accounts from the last 24 hours',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
kind: WidgetKinds.nostrBand.trendingNotes,
|
kind: WidgetKinds.nostrBand.trendingNotes,
|
||||||
title: 'Notes',
|
title: 'Notes',
|
||||||
|
description: 'Trending notes from the last 24 hours',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
1
src/utils/types.d.ts
vendored
1
src/utils/types.d.ts
vendored
@ -44,6 +44,7 @@ export interface WidgetGroup {
|
|||||||
|
|
||||||
export interface WidgetGroupItem {
|
export interface WidgetGroupItem {
|
||||||
title: string;
|
title: string;
|
||||||
|
description: string;
|
||||||
kind: number;
|
kind: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user