gsadmin/headplane
1
0
Fork 0
mirror of https://github.com/tale/headplane.git synced 2026-08-31 17:28:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: redesign buttons and share them in dialogs

Browse Source
This commit is contained in:
Aarnav Tale
2025-01-19 17:31:46 +00:00
parent b9a708b2e9
commit af248df648
10 changed files with 104 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/users/dialogs/remove.tsx
+10 -11
View File
@@ -1,8 +1,8 @@
import { XIcon } from '@primer/octicons-react';
import { X } from 'lucide-react';
import { Form, useSubmit } from 'react-router';
import { useState } from 'react';
import Button from '~/components/Button';
import IconButton from '~/components/IconButton';
import Code from '~/components/Code';
import Dialog from '~/components/Dialog';
@@ -12,19 +12,18 @@ interface Props {
export default function Remove({ username }: Props) {
const submit = useSubmit();
const dialogState = useState(false);
const [dialog, setDialog] = useState(false);
return (
<>
<Button
variant="light"
control={dialogState}
className="rounded-full p-0 w-8 h-8 flex items-center justify-center"
<IconButton
label={`Delete ${username}`}
onPress={() => setDialog(true)}
>
<XIcon className="w-4 h-4" />
</Button>
<Dialog control={dialogState}>
<Dialog.Panel control={dialogState}>
<X className="p-0.5" />
</IconButton>
<Dialog control={[dialog, setDialog]}>
<Dialog.Panel control={[dialog, setDialog]}>
{(close) => (
<>
<Dialog.Title>Delete {username}?</Dialog.Title>
app/routes/users/dialogs/rename.tsx
+10 -11
View File
@@ -1,8 +1,8 @@
import { PencilIcon } from '@primer/octicons-react';
import { Pencil } from 'lucide-react';
import { Form, useSubmit } from 'react-router';
import { useState } from 'react';
import Button from '~/components/Button';
import IconButton from '~/components/IconButton';
import Dialog from '~/components/Dialog';
import TextField from '~/components/TextField';
@@ -13,20 +13,19 @@ interface Props {
export default function Rename({ username, magic }: Props) {
const submit = useSubmit();
const dialogState = useState(false);
const [dialog, setDialog] = useState(false);
const [newName, setNewName] = useState(username);
return (
<>
<Button
variant="light"
control={dialogState}
className="rounded-full p-0 w-8 h-8 flex items-center justify-center"
<IconButton
label={`Rename ${username}`}
onPress={() => setDialog(true)}
>
<PencilIcon className="w-4 h-4" />
</Button>
<Dialog control={dialogState}>
<Dialog.Panel control={dialogState}>
<Pencil className="p-1" />
</IconButton>
<Dialog control={[dialog, setDialog]}>
<Dialog.Panel control={[dialog, setDialog]}>
{(close) => (
<>
<Dialog.Title>Rename {username}?</Dialog.Title>