You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.7 KiB
58 lines
1.7 KiB
import { EmbeddedCalendarEvent } from '@/components/Embedded/EmbeddedCalendarEvent' |
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' |
|
import { TDraftEvent } from '@/types' |
|
import { Event } from 'nostr-tools' |
|
import { useTranslation } from 'react-i18next' |
|
import { cn } from '@/lib/utils' |
|
|
|
/** |
|
* Converts a draft (no id/pubkey/sig) into an event-like object for preview rendering. |
|
*/ |
|
function draftToPreviewEvent(draft: TDraftEvent): Event { |
|
return { |
|
id: '', |
|
pubkey: '', |
|
sig: '', |
|
kind: draft.kind, |
|
created_at: draft.created_at, |
|
tags: draft.tags, |
|
content: draft.content |
|
} |
|
} |
|
|
|
export function CalendarEventPreview({ |
|
draft, |
|
className |
|
}: { |
|
draft: TDraftEvent |
|
className?: string |
|
}) { |
|
const { t } = useTranslation() |
|
const previewEvent = draftToPreviewEvent(draft) |
|
const jsonString = JSON.stringify( |
|
{ kind: draft.kind, content: draft.content, tags: draft.tags, created_at: draft.created_at }, |
|
null, |
|
2 |
|
) |
|
|
|
return ( |
|
<div className={cn('space-y-2', className)}> |
|
<Tabs defaultValue="rendered" className="w-full"> |
|
<TabsList className="grid w-full grid-cols-2"> |
|
<TabsTrigger value="rendered">{t('Rendered')}</TabsTrigger> |
|
<TabsTrigger value="json">{t('JSON')}</TabsTrigger> |
|
</TabsList> |
|
<TabsContent value="rendered" className="mt-2"> |
|
<div className="rounded-md border bg-muted/20 p-2"> |
|
<EmbeddedCalendarEvent event={previewEvent} /> |
|
</div> |
|
</TabsContent> |
|
<TabsContent value="json" className="mt-2"> |
|
<pre className="max-h-[240px] overflow-auto rounded-md border bg-muted/20 p-3 text-xs"> |
|
{jsonString} |
|
</pre> |
|
</TabsContent> |
|
</Tabs> |
|
</div> |
|
) |
|
}
|
|
|