Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-20 02:10:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

feat: export preset.

Browse source
This commit is contained in:
Wentao Lyu 2023-04-03 12:54:15 +08:00
parent ced65f8c98
commit 15ada95249
4 changed files with 98 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

20
client/src/components/ui/Dialog.tsx
View file

@ -1,5 +1,6 @@
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { Button } from '../ui/Button';
import { X } from "lucide-react"
import { cn } from "../../utils"
@ -81,7 +82,7 @@ const DialogFooter = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
"flex flex-col-reverse sm:flex-row sm:justify-between sm:space-x-2",
className
)}
{...props}
@ -132,6 +133,22 @@ const DialogClose = React.forwardRef<
))
DialogClose.displayName = DialogPrimitive.Title.displayName
const DialogButton = React.forwardRef<
React.ElementRef<typeof Button>,
React.ComponentPropsWithoutRef<typeof Button>
>(({ className, ...props }, ref) => (
<Button
ref={ref}
variant="outline"
className={cn(
"mt-2 inline-flex h-10 items-center justify-center rounded-md border border-slate-200 bg-transparent py-2 px-4 text-sm font-semibold text-slate-900 transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:hover:bg-slate-700 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900 sm:mt-0",
className
)}
{...props}
/>
))
DialogButton.displayName = DialogPrimitive.Title.displayName
export {
Dialog,
DialogTrigger,
@ -141,4 +158,5 @@ export {
DialogTitle,
DialogDescription,
DialogClose,
DialogButton,
}

37
client/src/components/ui/DialogTemplate.jsx
View file

@ -10,8 +10,16 @@ import {
} from './Dialog.tsx';
import { cn } from '~/utils/';
export default function DialogTemplate({ title, description, main, buttons, selection, className }) {
const { selectHandler, selectClasses, selectText } = selection;
export default function DialogTemplate({
title,
description,
main,
buttons,
leftButtons,
selection,
className
}) {
const { selectHandler, selectClasses, selectText } = selection || {};
const defaultSelect =
'bg-gray-900 text-white transition-colors hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900';
@ -43,16 +51,21 @@ export default function DialogTemplate({ title, description, main, buttons, sele
</div> */}
{main ? main : null}
<DialogFooter>
<DialogClose className="dark:hover:gray-400 border-gray-700">Cancel</DialogClose>
{buttons ? buttons : null}
<DialogClose
onClick={selectHandler}
className={`${
selectClasses || defaultSelect
} inline-flex h-10 items-center justify-center rounded-md border-none py-2 px-4 text-sm font-semibold`}
>
{selectText}
</DialogClose>
<div>{leftButtons ? leftButtons : null}</div>
<div>
<DialogClose className="dark:hover:gray-400 border-gray-700">Cancel</DialogClose>
{buttons ? buttons : null}
{selection ? (
<DialogClose
onClick={selectHandler}
className={`${
selectClasses || defaultSelect
} inline-flex h-10 items-center justify-center rounded-md border-none py-2 px-4 text-sm font-semibold`}
>
{selectText}
</DialogClose>
) : null}
</div>
</DialogFooter>
</DialogContent>
);