starred/linsa-linsa-io
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-04-23 16:58:38 +02:00
Code Issues 2 Packages Projects Releases Wiki Activity

chore: make delete icon color red for bottom bar

Browse Source
This commit is contained in:
Aslam H
2024-09-08 06:04:37 +07:00
parent f005101d91
commit 8daa17334a
1 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
web/components/routes/link/bottom-bar.tsx
View File

@@ -15,34 +15,36 @@ import { ID } from "jazz-tools"
import { globalLinkFormExceptionRefsAtom } from "./partials/form/link-form" import { globalLinkFormExceptionRefsAtom } from "./partials/form/link-form"
import { toast } from "sonner" import { toast } from "sonner"
interface ToolbarButtonProps { interface ToolbarButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {
icon: keyof typeof icons icon: keyof typeof icons
onClick?: (e: React.MouseEvent) => void onClick?: (e: React.MouseEvent) => void
tooltip?: string tooltip?: string
} }
const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(({ icon, onClick, tooltip }, ref) => { const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
const button = ( ({ icon, onClick, tooltip, ...props }, ref) => {
<Button variant="ghost" className="h-8 min-w-14" onClick={onClick} ref={ref}> const button = (
<LaIcon name={icon} /> <Button variant="ghost" className="h-8 min-w-14" onClick={onClick} ref={ref} {...props}>
</Button> <LaIcon name={icon} />
) </Button>
if (tooltip) {
return (
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent>
<p>{tooltip}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
) )
}
return button if (tooltip) {
}) return (
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent>
<p>{tooltip}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}
return button
}
)
ToolbarButton.displayName = "ToolbarButton" ToolbarButton.displayName = "ToolbarButton"
@@ -168,7 +170,12 @@ export const LinkBottomBar: React.FC = () => {
transition={{ duration: 0.1 }} transition={{ duration: 0.1 }}
> >
<ToolbarButton icon={"ArrowLeft"} onClick={() => setEditId(null)} /> <ToolbarButton icon={"ArrowLeft"} onClick={() => setEditId(null)} />
<ToolbarButton icon={"Trash"} onClick={handleDelete} ref={deleteBtnRef} /> <ToolbarButton
icon={"Trash"}
onClick={handleDelete}
className="text-destructive hover:text-destructive"
ref={deleteBtnRef}
/>
<ToolbarButton icon={"Ellipsis"} ref={editMoreBtnRef} /> <ToolbarButton icon={"Ellipsis"} ref={editMoreBtnRef} />
</motion.div> </motion.div>
)} )}