mirror of
https://github.com/nicotsx/ironmount.git
synced 2025-12-10 12:10:51 +01:00
chore: small ui improvements
This commit is contained in:
@@ -50,9 +50,9 @@ export const CreateVolumeDialog = ({ open, setOpen }: Props) => {
|
|||||||
<ScrollArea className="h-[500px]">
|
<ScrollArea className="h-[500px]">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>Create volume</DialogTitle>
|
<DialogTitle>Create volume</DialogTitle>
|
||||||
<DialogDescription>Enter a name for the new volume</DialogDescription>
|
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<CreateVolumeForm
|
<CreateVolumeForm
|
||||||
|
className="mt-4"
|
||||||
mode="create"
|
mode="create"
|
||||||
formId={formId}
|
formId={formId}
|
||||||
onSubmit={(values) => {
|
onSubmit={(values) => {
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import { CheckCircle, Loader2, XCircle } from "lucide-react";
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
import { testConnectionMutation } from "~/api-client/@tanstack/react-query.gen";
|
import { testConnectionMutation } from "~/api-client/@tanstack/react-query.gen";
|
||||||
import { slugify } from "~/lib/utils";
|
import { cn, slugify } from "~/lib/utils";
|
||||||
import { Button } from "./ui/button";
|
import { Button } from "./ui/button";
|
||||||
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
|
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
|
||||||
import { Input } from "./ui/input";
|
import { Input } from "./ui/input";
|
||||||
@@ -24,6 +24,7 @@ type Props = {
|
|||||||
initialValues?: Partial<FormValues>;
|
initialValues?: Partial<FormValues>;
|
||||||
formId?: string;
|
formId?: string;
|
||||||
loading?: boolean;
|
loading?: boolean;
|
||||||
|
className?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultValuesForType = {
|
const defaultValuesForType = {
|
||||||
@@ -33,7 +34,7 @@ const defaultValuesForType = {
|
|||||||
webdav: { backend: "webdav" as const, port: 80, ssl: false },
|
webdav: { backend: "webdav" as const, port: 80, ssl: false },
|
||||||
};
|
};
|
||||||
|
|
||||||
export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading }: Props) => {
|
export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading, className }: Props) => {
|
||||||
const form = useForm<FormValues>({
|
const form = useForm<FormValues>({
|
||||||
resolver: arktypeResolver(formSchema),
|
resolver: arktypeResolver(formSchema),
|
||||||
defaultValues: initialValues,
|
defaultValues: initialValues,
|
||||||
@@ -83,7 +84,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Form {...form}>
|
<Form {...form}>
|
||||||
<form id={formId} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
<form id={formId} onSubmit={form.handleSubmit(onSubmit)} className={cn("space-y-4", className)}>
|
||||||
<FormField
|
<FormField
|
||||||
control={form.control}
|
control={form.control}
|
||||||
name="name"
|
name="name"
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ export default function Layout() {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
|
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
|
||||||
<main className="relative flex flex-col pt-4 sm:pt-8 px-2 sm:px-4 pb-4 container mx-auto max-w-full">
|
<main className="relative flex flex-col pt-4 sm:pt-8 px-2 sm:px-4 pb-4 container mx-auto">
|
||||||
<AppBreadcrumb />
|
<AppBreadcrumb />
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -125,7 +125,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
|
|||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell className="hidden sm:table-cell">
|
<TableCell className="hidden sm:table-cell">
|
||||||
<span className="flex items-center gap-2">
|
<span className="flex items-center gap-2">
|
||||||
<span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1 max-w-[200px]">
|
<span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1">
|
||||||
{volume.path}
|
{volume.path}
|
||||||
</span>
|
</span>
|
||||||
<Copy size={10} />
|
<Copy size={10} />
|
||||||
|
|||||||
Reference in New Issue
Block a user