feat(app): changelog remove action
This commit is contained in:
parent
89dcb42364
commit
00fe6eafcd
72
apps/app/src/components/Changelog/Delete.tsx
Normal file
72
apps/app/src/components/Changelog/Delete.tsx
Normal file
@ -0,0 +1,72 @@
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
Button,
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from '@boring.tools/ui'
|
||||
import { useNavigate } from '@tanstack/react-router'
|
||||
import { Trash2Icon } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { useChangelogRemove } from '../../hooks/useChangelog'
|
||||
|
||||
export const ChangelogDelete = ({ id }: { id: string }) => {
|
||||
const remove = useChangelogRemove()
|
||||
const navigate = useNavigate({ from: `/changelog/${id}` })
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
const removeChangelog = () => {
|
||||
remove.mutate(
|
||||
{ id },
|
||||
{
|
||||
onSuccess: () => {
|
||||
setIsOpen(false)
|
||||
navigate({ to: '/changelog' })
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Tooltip>
|
||||
<AlertDialog open={isOpen}>
|
||||
<AlertDialogTrigger asChild>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant={'ghost'} onClick={() => setIsOpen(true)}>
|
||||
<Trash2Icon strokeWidth={1.5} />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This action cannot be undone. This will permanently delete your
|
||||
changelog and remove your data from our servers.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel onClick={() => setIsOpen(false)}>
|
||||
Cancel
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction asChild>
|
||||
<Button onClick={removeChangelog} variant={'destructive'}>
|
||||
Remove
|
||||
</Button>
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
<TooltipContent>
|
||||
<p>Remove</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
import { ThemeProvider } from '@boring.tools/ui'
|
||||
import { ThemeProvider, TooltipProvider } from '@boring.tools/ui'
|
||||
import { ClerkProvider } from '@clerk/clerk-react'
|
||||
import { RouterProvider, createRouter } from '@tanstack/react-router'
|
||||
import { StrictMode } from 'react'
|
||||
@ -36,16 +36,18 @@ if (!rootElement.innerHTML) {
|
||||
<StrictMode>
|
||||
<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
|
||||
<ThemeProvider defaultTheme="dark" storageKey="ui-theme">
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{import.meta.env.PROD && (
|
||||
<script
|
||||
defer
|
||||
src="https://umami.hashdot.co/script.js"
|
||||
data-website-id="446678cc-e2d8-4b6f-8e8f-389cd7f6db28"
|
||||
/>
|
||||
)}
|
||||
<RouterProvider router={router} />
|
||||
</QueryClientProvider>
|
||||
<TooltipProvider delayDuration={350}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{import.meta.env.PROD && (
|
||||
<script
|
||||
defer
|
||||
src="https://umami.hashdot.co/script.js"
|
||||
data-website-id="446678cc-e2d8-4b6f-8e8f-389cd7f6db28"
|
||||
/>
|
||||
)}
|
||||
<RouterProvider router={router} />
|
||||
</QueryClientProvider>
|
||||
</TooltipProvider>
|
||||
</ThemeProvider>
|
||||
</ClerkProvider>
|
||||
</StrictMode>,
|
||||
|
@ -1,5 +1,18 @@
|
||||
import { Button } from '@boring.tools/ui'
|
||||
import {
|
||||
Button,
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from '@boring.tools/ui'
|
||||
import { createLazyFileRoute } from '@tanstack/react-router'
|
||||
import {
|
||||
FileStackIcon,
|
||||
Globe2Icon,
|
||||
PencilIcon,
|
||||
TerminalSquareIcon,
|
||||
Trash2Icon,
|
||||
} from 'lucide-react'
|
||||
import { ChangelogDelete } from '../../components/Changelog/Delete'
|
||||
import { useChangelogById } from '../../hooks/useChangelog'
|
||||
|
||||
const Component = () => {
|
||||
@ -21,7 +34,56 @@ const Component = () => {
|
||||
<div className="flex flex-col gap-5">
|
||||
{!isPending && data && (
|
||||
<div>
|
||||
<h1 className="text-3xl">{data.title}</h1>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex gap-3 items-center">
|
||||
<FileStackIcon
|
||||
strokeWidth={1.5}
|
||||
className="w-10 h-10 text-muted-foreground"
|
||||
/>
|
||||
<div>
|
||||
<h1 className="text-3xl">{data.title}</h1>
|
||||
|
||||
<p className="text-muted-foreground mt-2">{data.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant={'ghost'}>
|
||||
<TerminalSquareIcon strokeWidth={1.5} />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>CLI</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant={'ghost'}>
|
||||
<Globe2Icon strokeWidth={1.5} />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Public Page</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button variant={'ghost'}>
|
||||
<PencilIcon strokeWidth={1.5} />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Edit</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<ChangelogDelete id={id} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user