mirror of
https://github.com/khairul169/code-share.git
synced 2026-10-24 11:53:58 +07:00
feat: rebuild app using vike
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
/* eslint-disable react/display-name */
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { cn } from "~/lib/utils";
|
||||
import React, { forwardRef } from "react";
|
||||
import { IconType } from "react-icons/lib";
|
||||
|
||||
type Props = React.ComponentProps<typeof Button> & {
|
||||
icon: IconType;
|
||||
};
|
||||
|
||||
const ActionButton = forwardRef(
|
||||
({ icon: Icon, className, onClick, ...props }: Props, ref: any) => {
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={cn(
|
||||
"text-slate-400 hover:bg-transparent hover:dark:bg-transparent h-8 w-6 p-0 flex-shrink-0",
|
||||
className
|
||||
)}
|
||||
onClick={(e) => {
|
||||
if (onClick) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onClick(e);
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<Icon />
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export default ActionButton;
|
||||
@@ -0,0 +1,62 @@
|
||||
import * as React from "react";
|
||||
import { Slot } from "@radix-ui/react-slot";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
|
||||
destructive:
|
||||
"bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
|
||||
outline:
|
||||
"border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
|
||||
secondary:
|
||||
"bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
|
||||
ghost:
|
||||
"hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
|
||||
link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
|
||||
},
|
||||
size: {
|
||||
default: "h-10 px-4 py-2",
|
||||
sm: "h-9 rounded-md px-3",
|
||||
lg: "h-11 rounded-md px-8",
|
||||
icon: "h-10 w-10",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
(
|
||||
{ className, variant, size, type = "button", asChild = false, ...props },
|
||||
ref
|
||||
) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
return (
|
||||
<Comp
|
||||
type={type}
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button, buttonVariants };
|
||||
@@ -0,0 +1,145 @@
|
||||
/* eslint-disable react/display-name */
|
||||
import ReactCodeMirror, {
|
||||
EditorView,
|
||||
ReactCodeMirrorRef,
|
||||
keymap,
|
||||
} from "@uiw/react-codemirror";
|
||||
import { javascript } from "@codemirror/lang-javascript";
|
||||
import { css } from "@codemirror/lang-css";
|
||||
import { html } from "@codemirror/lang-html";
|
||||
import { json } from "@codemirror/lang-json";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { tokyoNight } from "@uiw/codemirror-theme-tokyo-night";
|
||||
import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
|
||||
import prettier from "prettier/standalone";
|
||||
import prettierHtmlPlugin from "prettier/plugins/html";
|
||||
import prettierCssPlugin from "prettier/plugins/postcss";
|
||||
import prettierBabelPlugin from "prettier/plugins/babel";
|
||||
import * as prettierPluginEstree from "prettier/plugins/estree";
|
||||
import { abbreviationTracker } from "@emmetio/codemirror6-plugin";
|
||||
import { useDebounce } from "~/hooks/useDebounce";
|
||||
import useCommandKey from "~/hooks/useCommandKey";
|
||||
|
||||
type Props = {
|
||||
lang?: string;
|
||||
value: string;
|
||||
wordWrap?: boolean;
|
||||
onChange: (val: string) => void;
|
||||
formatOnSave?: boolean;
|
||||
};
|
||||
|
||||
const CodeEditor = (props: Props) => {
|
||||
const codeMirror = useRef<ReactCodeMirrorRef>(null);
|
||||
const { lang, value, formatOnSave, wordWrap, onChange } = props;
|
||||
const [data, setData] = useState(value);
|
||||
const [debounceChange, resetDebounceChange] = useDebounce(onChange, 3000);
|
||||
const langMetadata = useMemo(() => getLangMetadata(lang || "plain"), [lang]);
|
||||
|
||||
const onSave = useCallback(async () => {
|
||||
try {
|
||||
const cm = codeMirror.current?.view;
|
||||
const content = cm ? cm.state.doc.toString() : data;
|
||||
const formatter = langMetadata.formatter;
|
||||
|
||||
if (formatOnSave && cm && formatter != null) {
|
||||
const [parser, ...plugins] = formatter;
|
||||
const cursor = cm.state.selection.main.head || 0;
|
||||
const { formatted, cursorOffset } = await prettier.formatWithCursor(
|
||||
content,
|
||||
{
|
||||
parser,
|
||||
plugins,
|
||||
cursorOffset: cursor,
|
||||
}
|
||||
);
|
||||
|
||||
setData(formatted);
|
||||
onChange(formatted);
|
||||
|
||||
if (cm) {
|
||||
cm.dispatch({
|
||||
changes: { from: 0, to: cm?.state.doc.length, insert: formatted },
|
||||
});
|
||||
cm.dispatch({
|
||||
selection: { anchor: cursorOffset },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
onChange(content);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("prettier error", err);
|
||||
}
|
||||
|
||||
setTimeout(() => resetDebounceChange(), 100);
|
||||
}, [
|
||||
data,
|
||||
langMetadata.formatter,
|
||||
formatOnSave,
|
||||
onChange,
|
||||
resetDebounceChange,
|
||||
]);
|
||||
|
||||
useCommandKey("s", onSave);
|
||||
|
||||
useEffect(() => {
|
||||
setData(value);
|
||||
}, [value]);
|
||||
|
||||
const extensions = [...langMetadata.extensions, keymap.of(vscodeKeymap)];
|
||||
if (wordWrap) {
|
||||
extensions.push(EditorView.lineWrapping);
|
||||
}
|
||||
|
||||
return (
|
||||
<ReactCodeMirror
|
||||
ref={codeMirror}
|
||||
extensions={extensions}
|
||||
indentWithTab={false}
|
||||
basicSetup={{ defaultKeymap: false }}
|
||||
value={data}
|
||||
onChange={(val) => {
|
||||
setData(val);
|
||||
debounceChange(val);
|
||||
}}
|
||||
height="100%"
|
||||
theme={tokyoNight}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
function getLangMetadata(lang: string) {
|
||||
let extensions: any[] = [];
|
||||
let formatter: any = null;
|
||||
|
||||
switch (lang) {
|
||||
case "html":
|
||||
extensions = [html({ selfClosingTags: true }), abbreviationTracker()];
|
||||
formatter = ["html", prettierHtmlPlugin];
|
||||
break;
|
||||
case "css":
|
||||
extensions = [css()];
|
||||
formatter = ["css", prettierCssPlugin];
|
||||
break;
|
||||
case "json":
|
||||
extensions = [json()];
|
||||
formatter = ["json", prettierBabelPlugin, prettierPluginEstree];
|
||||
break;
|
||||
case "jsx":
|
||||
case "js":
|
||||
case "ts":
|
||||
case "tsx":
|
||||
extensions = [
|
||||
javascript({
|
||||
jsx: ["jsx", "tsx"].includes(lang),
|
||||
typescript: ["tsx", "ts"].includes(lang),
|
||||
}),
|
||||
];
|
||||
formatter = ["babel", prettierBabelPlugin, prettierPluginEstree];
|
||||
break;
|
||||
}
|
||||
|
||||
return { extensions, formatter };
|
||||
}
|
||||
|
||||
export default CodeEditor;
|
||||
@@ -0,0 +1,122 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const Dialog = DialogPrimitive.Root;
|
||||
|
||||
const DialogTrigger = DialogPrimitive.Trigger;
|
||||
|
||||
const DialogPortal = DialogPrimitive.Portal;
|
||||
|
||||
const DialogClose = DialogPrimitive.Close;
|
||||
|
||||
const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-slate-200 bg-white p-6 md:p-8 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:rounded-xl dark:border-slate-800 dark:bg-slate-950",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 data-[state=open]:text-slate-500 dark:ring-offset-slate-950 dark:focus:ring-slate-300 dark:data-[state=open]:bg-slate-800 dark:data-[state=open]:text-slate-400">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
));
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||
|
||||
const DialogHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
DialogHeader.displayName = "DialogHeader";
|
||||
|
||||
const DialogFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
DialogFooter.displayName = "DialogFooter";
|
||||
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||
|
||||
const DialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-slate-500 dark:text-slate-400", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogPortal,
|
||||
DialogOverlay,
|
||||
DialogClose,
|
||||
DialogTrigger,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
};
|
||||
@@ -0,0 +1,206 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
||||
import { Check, ChevronRight, Circle } from "lucide-react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root;
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
||||
|
||||
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
|
||||
|
||||
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
|
||||
|
||||
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
|
||||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
|
||||
|
||||
const DropdownMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRight className="ml-auto h-4 w-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
));
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName;
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName;
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
));
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, onClick, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
onClick={(e) => {
|
||||
if (onClick) {
|
||||
e.stopPropagation();
|
||||
onClick(e);
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
||||
|
||||
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
));
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName;
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Circle className="h-2 w-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
));
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean;
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
|
||||
|
||||
const DropdownMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuRadioGroup,
|
||||
};
|
||||
@@ -0,0 +1,22 @@
|
||||
import { FileSchema } from "~/server/db/schema/file";
|
||||
import { ComponentProps } from "react";
|
||||
import { FiFile, FiFolder } from "react-icons/fi";
|
||||
|
||||
type FileIconProps = {
|
||||
file: Pick<FileSchema, "filename" | "isDirectory">;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const FileIcon = ({ file, className }: FileIconProps) => {
|
||||
const props: ComponentProps<"svg"> = {
|
||||
className,
|
||||
};
|
||||
|
||||
if (file.isDirectory) {
|
||||
return <FiFolder {...props} />;
|
||||
}
|
||||
|
||||
return <FiFile {...props} />;
|
||||
};
|
||||
|
||||
export default FileIcon;
|
||||
@@ -0,0 +1,25 @@
|
||||
import { useForm } from "~/hooks/useForm";
|
||||
import { FieldValues } from "react-hook-form";
|
||||
import React from "react";
|
||||
|
||||
type Props<T extends FieldValues> = {
|
||||
form: ReturnType<typeof useForm<T>>;
|
||||
};
|
||||
|
||||
const FormErrorMessage = <T extends FieldValues>({ form }: Props<T>) => {
|
||||
const { errors } = form.formState;
|
||||
const error = Object.entries(errors)[0];
|
||||
if (!error) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [key, { message }] = error as any;
|
||||
|
||||
return (
|
||||
<div className="bg-slate-800 border border-slate-600 rounded-md px-4 py-2 text-sm mb-4">
|
||||
{`${key}: ${message}`}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormErrorMessage;
|
||||
@@ -0,0 +1,25 @@
|
||||
import * as React from "react";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
export interface InputProps
|
||||
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Input.displayName = "Input";
|
||||
|
||||
export { Input };
|
||||
@@ -0,0 +1,22 @@
|
||||
import { cn } from "~/lib/utils";
|
||||
import React from "react";
|
||||
|
||||
type Props = {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const Panel = ({ children, className }: Props) => {
|
||||
return (
|
||||
<div className="bg-slate-800 w-full h-full flex-col items-stretch md:rounded-lg md:overflow-hidden flex">
|
||||
<div className="gap-2 py-3 px-4 hidden md:flex">
|
||||
<div className="bg-red-500 rounded-full h-3 w-3" />
|
||||
<div className="bg-yellow-500 rounded-full h-3 w-3" />
|
||||
<div className="bg-green-500 rounded-full h-3 w-3" />
|
||||
</div>
|
||||
<div className={cn("flex-1 overflow-hidden", className)}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Panel;
|
||||
@@ -0,0 +1,45 @@
|
||||
"use client";
|
||||
|
||||
import { GripVertical } from "lucide-react";
|
||||
import * as ResizablePrimitive from "react-resizable-panels";
|
||||
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
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 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 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 border-slate-200 bg-slate-200 dark:border-slate-800 dark:bg-slate-800">
|
||||
<GripVertical className="h-2.5 w-2.5" />
|
||||
</div>
|
||||
)}
|
||||
</ResizablePrimitive.PanelResizeHandle>
|
||||
);
|
||||
|
||||
export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
|
||||
@@ -0,0 +1,12 @@
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { cn } from "~/lib/utils";
|
||||
|
||||
type Spinner = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const Spinner = ({ className }: Spinner) => {
|
||||
return <Loader2 className={cn("size-8 animate-spin", className)} />;
|
||||
};
|
||||
|
||||
export default Spinner;
|
||||
@@ -0,0 +1,136 @@
|
||||
import { cn } from "~/lib/utils";
|
||||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import ActionButton from "./action-button";
|
||||
import { FiX } from "react-icons/fi";
|
||||
import FileIcon from "./file-icon";
|
||||
|
||||
export type Tab = {
|
||||
title: string;
|
||||
icon?: React.ReactNode;
|
||||
render?: () => React.ReactNode;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
tabs: Tab[];
|
||||
current?: number;
|
||||
onChange?: (idx: number) => void;
|
||||
onClose?: (idx: number) => void;
|
||||
};
|
||||
|
||||
const Tabs = ({ tabs, current = 0, onChange, onClose }: Props) => {
|
||||
const tabContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const onWheel = (e: WheelEvent) => {
|
||||
e.cancelable && e.preventDefault();
|
||||
if (tabContainerRef.current) {
|
||||
tabContainerRef.current.scrollLeft += e.deltaY + e.deltaX;
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!tabs.length || !tabContainerRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const container = tabContainerRef.current;
|
||||
container.addEventListener("wheel", onWheel);
|
||||
return () => {
|
||||
container.removeEventListener("wheel", onWheel);
|
||||
};
|
||||
}, [tabs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!tabs.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const container = tabContainerRef.current;
|
||||
const tabEl: any = container?.querySelector(`[data-idx="${current}"]`);
|
||||
if (!container || !tabEl) {
|
||||
return;
|
||||
}
|
||||
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
const scrollX = tabEl.offsetLeft - containerRect.left;
|
||||
container.scrollTo({ left: scrollX, behavior: "smooth" });
|
||||
}, [tabs, current]);
|
||||
|
||||
const tabView = useMemo(() => {
|
||||
const tab = tabs[current];
|
||||
const element = tab?.render ? tab.render() : null;
|
||||
return element;
|
||||
}, [tabs, current]);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col items-stretch bg-slate-800">
|
||||
{tabs.length > 0 ? (
|
||||
<nav
|
||||
ref={tabContainerRef}
|
||||
className="flex items-stretch overflow-x-auto w-full h-10 min-h-10 hide-scrollbar"
|
||||
>
|
||||
{tabs.map((tab, idx) => (
|
||||
<TabItem
|
||||
key={idx}
|
||||
index={idx}
|
||||
title={tab.title}
|
||||
icon={tab.icon}
|
||||
isActive={idx === current}
|
||||
onSelect={() => onChange && onChange(idx)}
|
||||
onClose={() => onClose && onClose(idx)}
|
||||
/>
|
||||
))}
|
||||
</nav>
|
||||
) : null}
|
||||
|
||||
<main className="flex-1 overflow-hidden">{tabView}</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type TabItemProps = {
|
||||
index: number;
|
||||
title: string;
|
||||
icon?: React.ReactNode;
|
||||
isActive?: boolean;
|
||||
onSelect: () => void;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const TabItem = ({
|
||||
index,
|
||||
title,
|
||||
isActive,
|
||||
onSelect,
|
||||
onClose,
|
||||
}: TabItemProps) => {
|
||||
const lastDotFile = title.lastIndexOf(".");
|
||||
const ext = title.substring(lastDotFile);
|
||||
const filename = title.substring(0, lastDotFile);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-idx={index}
|
||||
className={cn(
|
||||
"group border-b-2 border-transparent truncate flex-shrink-0 text-white/70 transition-all hover:text-white text-center max-w-[140px] md:max-w-[180px] text-sm flex items-center gap-0 relative z-[1]",
|
||||
isActive ? "border-slate-500 text-white" : ""
|
||||
)}
|
||||
onClick={onSelect}
|
||||
>
|
||||
<button className="pl-4 pr-0 truncate flex items-center self-stretch">
|
||||
<FileIcon
|
||||
file={{ isDirectory: false, filename: title }}
|
||||
className="mr-1"
|
||||
/>
|
||||
<span className="truncate">{filename}</span>
|
||||
<span>{ext}</span>
|
||||
</button>
|
||||
<ActionButton
|
||||
icon={FiX}
|
||||
className="opacity-0 group-hover:opacity-100 transition-colors"
|
||||
onClick={onClose}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tabs;
|
||||
Reference in New Issue
Block a user