-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add react-resizable-panels and sonner components
- Loading branch information
1 parent
d4b8357
commit 62b7692
Showing
14 changed files
with
175 additions
and
422 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@itsrakesh/ui": minor | ||
--- | ||
|
||
Added resizable component and updated toast component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"cSpell.words": ["Sonner"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
BROWSER=none |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { cn } from "@itsrakesh/utils"; | ||
import { DragHandleDots2Icon } from "@radix-ui/react-icons"; | ||
import * as ResizablePrimitive from "react-resizable-panels"; | ||
|
||
const ResizablePanelGroup = ({ | ||
className, | ||
...props | ||
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => ( | ||
<ResizablePrimitive.PanelGroup | ||
className={cn( | ||
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col", | ||
className | ||
)} | ||
{...props} | ||
/> | ||
); | ||
|
||
const ResizablePanel = ResizablePrimitive.Panel; | ||
|
||
const ResizableHandle = ({ | ||
withHandle, | ||
className, | ||
...props | ||
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & { | ||
withHandle?: boolean; | ||
}) => ( | ||
<ResizablePrimitive.PanelResizeHandle | ||
className={cn( | ||
"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", | ||
className | ||
)} | ||
{...props} | ||
> | ||
{withHandle && ( | ||
<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"> | ||
<DragHandleDots2Icon className="h-2.5 w-2.5" /> | ||
</div> | ||
)} | ||
</ResizablePrimitive.PanelResizeHandle> | ||
); | ||
|
||
export { ResizableHandle, ResizablePanel, ResizablePanelGroup }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export { | ||
ResizableHandle, | ||
ResizablePanel, | ||
ResizablePanelGroup, | ||
} from "./Resizable"; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,35 +1,29 @@ | ||
"use client"; | ||
|
||
import { | ||
Toast, | ||
ToastClose, | ||
ToastDescription, | ||
ToastProvider, | ||
ToastTitle, | ||
ToastViewport, | ||
useToast, | ||
} from "../"; | ||
import { Toaster as Sonner, toast } from "sonner"; | ||
|
||
export function Toaster() { | ||
const { toasts } = useToast(); | ||
type ToasterProps = React.ComponentProps<typeof Sonner>; | ||
|
||
const Toaster = ({ ...props }: ToasterProps) => { | ||
return ( | ||
<ToastProvider> | ||
{toasts.map(function ({ id, title, description, action, ...props }) { | ||
return ( | ||
<Toast key={id} {...props}> | ||
<div className="grid gap-1"> | ||
{title && <ToastTitle>{title}</ToastTitle>} | ||
{description && ( | ||
<ToastDescription>{description}</ToastDescription> | ||
)} | ||
</div> | ||
{action} | ||
<ToastClose /> | ||
</Toast> | ||
); | ||
})} | ||
<ToastViewport /> | ||
</ToastProvider> | ||
<Sonner | ||
className="toaster group" | ||
toastOptions={{ | ||
classNames: { | ||
toast: | ||
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg", | ||
description: "group-[.toast]:text-muted-foreground", | ||
actionButton: | ||
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground", | ||
cancelButton: | ||
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground", | ||
error: | ||
"group-[.toast]:bg-destructive group-[.toast]:text-destructive-foreground", | ||
}, | ||
}} | ||
{...props} | ||
/> | ||
); | ||
} | ||
}; | ||
|
||
export { Toaster, toast }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1 @@ | ||
export { | ||
type ToastProps, | ||
type ToastActionElement, | ||
ToastProvider, | ||
ToastViewport, | ||
Toast, | ||
ToastTitle, | ||
ToastDescription, | ||
ToastClose, | ||
ToastAction, | ||
} from "./Toast"; | ||
export { Toaster } from "./Toaster"; | ||
export { useToast, toast, reducer } from "./use-toast"; | ||
export { Toaster, toast } from "./Toaster"; |
Oops, something went wrong.