rsp2k/headplane
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
No known key found for this signature in database
10 changed files with 104 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

21
app/routes/users/dialogs/remove.tsx
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>

21
app/routes/users/dialogs/rename.tsx
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>