prehistoric-systems/web
1
0
Fork 0
mirror of https://codeberg.org/Freedium-cfd/web.git synced 2026-03-11 09:04:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: enhance ReportProblem component and add new article button

Browse source
This commit is contained in:
ZhymabekRoman 2025-01-26 20:45:28 +05:00
parent 8671046383
commit 9c2baed74c
5 changed files with 45 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
new-web/bun.lockb
View file

Binary file not shown.

1
new-web/package.json
View file

@ -42,6 +42,7 @@
},
"type": "module",
"dependencies": {
"@iconify-json/stash": "^1.2.2",
"@iconify/svelte": "^4.2.0",
"@iconify/tailwind": "^1.2.0",
"bits-ui": "^0.21.16",

14
new-web/src/lib/elements/ArticlePage.svelte
View file

@ -156,10 +156,16 @@
<aside class="w-full mt-7 lg:mt-0 max-w-64" aria-labelledby="toc-heading">
<div class="sticky top-12">
<Button class="w-full mb-4">
<span class="icon-[heroicons--arrow-down-20-solid] size-4 mr-1" />
Download as PDF/Markdown
</Button>
<div class="flex gap-2 mb-4">
<Button variant="outline" class="flex-1">
<span class="icon-[heroicons--document-arrow-down-20-solid] size-4 mr-1" />
PDF
</Button>
<Button class="flex-1" variant="outline">
<span class="icon-[heroicons--document-text-20-solid] size-4 mr-1" />
Markdown
</Button>
</div>
<nav class="w-full p-4 bg-white rounded-lg shadow-lg dark:bg-zinc-900">
<h2 id="toc-heading" class="mb-4 text-xl font-semibold text-primary">Contents</h2>
{#if article.tableOfContents && article.tableOfContents.length > 0}

8
new-web/src/lib/elements/Header.svelte
View file

@ -96,7 +96,11 @@
/>
<div class="w-px h-6 bg-zinc-300 dark:bg-zinc-700"></div>
<ThemeToggle />
<ReportProblem />
<ReportProblem variant="warning" showBadge={true} />
<Button>
<span class="icon-[stash--article-plus-solid] text-white size-5" />
<span class="sr-only">Add article</span>
</Button>
</div>
<div class="flex items-center space-x-2 md:hidden">
@ -104,7 +108,7 @@
<span class="icon-[heroicons-outline--magnifying-glass] size-5" />
</Button>
<ThemeToggle />
<ReportProblem />
<ReportProblem variant="danger" compact={true} />
<Button
variant="ghost"
size="icon"

31
new-web/src/lib/elements/ReportProblem.svelte
View file

@ -13,6 +13,10 @@
let problemDescription = '';
let problemType = 'ui_problem';
export let variant: 'default' | 'warning' | 'danger' = 'default';
export let showBadge = false;
export let compact = false;
const handleSubmit = () => {
console.log({ problemType, problemDescription });
toast.success(`${problemType} submitted`);
@ -20,14 +24,35 @@
problemType = 'ui_problem';
open = false;
};
const getVariantStyles = (variant: string) => {
const styles = {
default: 'bg-primary hover:bg-primary/90',
warning: 'bg-purple-500 hover:bg-purple-600 text-white',
danger: 'bg-red-500 hover:bg-red-600 text-white'
};
return styles[variant] || styles.default;
};
</script>
{#if $isDesktop}
<Dialog.Root bind:open>
<Dialog.Trigger class={buttonVariants({ variant: 'ghost' })}>
<div class="flex items-center space-x-2 text-primary">
<Dialog.Trigger
class={`${buttonVariants({ variant: 'default' })} ${getVariantStyles(variant)} relative`}
>
<div class="flex items-center space-x-2">
<span class="icon-[heroicons--exclamation-triangle-solid] size-5" />
<span class="hidden text-sm font-medium lg:block">Report a problem</span>
{#if !compact}
<span class="hidden text-sm font-medium lg:block">Report a problem</span>
{/if}
{#if showBadge}
<span class="absolute flex w-3 h-3 -top-1 -right-1">
<span
class="absolute inline-flex w-full h-full bg-red-400 rounded-full opacity-75 animate-ping"
></span>
<span class="relative inline-flex w-3 h-3 bg-red-500 rounded-full"></span>
</span>
{/if}
</div>
</Dialog.Trigger>
<form on:submit|preventDefault={handleSubmit}>