ershisan99/DevToysWeb
1
0
Fork 0
mirror of https://github.com/ershisan99/DevToysWeb.git synced 2025-12-16 12:32:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor!: refine spacings

Browse Source 
BREAKING CAHNGE: some spaces changed
This commit is contained in:
rusconn
2024-03-28 18:08:33 +09:00
parent 2fc9b7e419
commit 2741082c84
14 changed files with 99 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/converters/json-yaml/page.tsx
View File

@@ -127,18 +127,15 @@ export default function Page() {
);
return (
<PageRootSection
className="flex h-full flex-col"
title={toolGroups.converters.tools.jsonYaml.longTitle}
>
<PageSection className="mb-6 mt-0" title="Configuration">
<PageRootSection className="h-full" title={toolGroups.converters.tools.jsonYaml.longTitle}>
<PageSection title="Configuration">
<Configurations list={[indentationConfig]} />
</PageSection>
<div className="flex flex-1 flex-col gap-x-4 gap-y-5 lg:flex-row">
<PageSection className="mt-0 min-h-[200px] flex-1" title="Json" control={jsonControl}>
<PageSection className="min-h-[200px] flex-1" title="Json" control={jsonControl}>
<Editor language="json" value={form.json} onChange={onJsonChange} />
</PageSection>
<PageSection className="mt-0 min-h-[200px] flex-1" title="Yaml" control={yamlControl}>
<PageSection className="min-h-[200px] flex-1" title="Yaml" control={yamlControl}>
<Editor language="yaml" value={form.yaml} onChange={onYamlChange} />
</PageSection>
</div>

28
app/converters/number-base/page.tsx
View File

@@ -85,21 +85,23 @@ export default function Page() {
return (
<PageRootSection title={toolGroups.converters.tools.numberBase.longTitle}>
<PageSection className="mb-6" title="Configuration">
<PageSection title="Configuration">
<Configurations list={[formatNumberConfig]} />
</PageSection>
<PageSection title="Decimal" control={decControl}>
<Input value={dec} onChange={onDecChange} />
</PageSection>
<PageSection title="Hexadecimal" control={hexControl}>
<Input value={hex} onChange={onHexChange} />
</PageSection>
<PageSection title="Octal" control={octControl}>
<Input value={oct} onChange={onOctChange} />
</PageSection>
<PageSection title="Binary" control={binControl}>
<Input value={bin} onChange={onBinChange} />
</PageSection>
<div className="flex flex-col gap-3">
<PageSection title="Decimal" control={decControl}>
<Input value={dec} onChange={onDecChange} />
</PageSection>
<PageSection title="Hexadecimal" control={hexControl}>
<Input value={hex} onChange={onHexChange} />
</PageSection>
<PageSection title="Octal" control={octControl}>
<Input value={oct} onChange={onOctChange} />
</PageSection>
<PageSection title="Binary" control={binControl}>
<Input value={bin} onChange={onBinChange} />
</PageSection>
</div>
</PageRootSection>
);
}

14
app/encoders-decoders/base64/page.tsx
View File

@@ -68,12 +68,14 @@ export default function Page() {
return (
<PageRootSection title={toolGroups.encodersDecoders.tools.base64.longTitle}>
<PageSection title="Decoded" control={decodedControl}>
<Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
</PageSection>
<PageSection title="Encoded" control={encodedControl}>
<Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
</PageSection>
<div className="flex flex-col gap-3">
<PageSection title="Decoded" control={decodedControl}>
<Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
</PageSection>
<PageSection title="Encoded" control={encodedControl}>
<Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
</PageSection>
</div>
</PageRootSection>
);
}

14
app/encoders-decoders/html/page.tsx
View File

@@ -66,12 +66,14 @@ export default function Page() {
return (
<PageRootSection title={toolGroups.encodersDecoders.tools.html.longTitle}>
<PageSection title="Decoded" control={decodedControl}>
<Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
</PageSection>
<PageSection title="Encoded" control={encodedControl}>
<Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
</PageSection>
<div className="flex flex-col gap-3">
<PageSection title="Decoded" control={decodedControl}>
<Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
</PageSection>
<PageSection title="Encoded" control={encodedControl}>
<Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
</PageSection>
</div>
</PageRootSection>
);
}

14
app/encoders-decoders/jwt/page.tsx
View File

@@ -47,12 +47,14 @@ export default function Page() {
<PageSection title="Jwt Token" control={jwtTokenControl}>
<Textarea value={jwt} onChange={onJwtChange} rows={3} />
</PageSection>
<PageSection title="Header" control={heaederControl}>
<Editor height={180} language="json" value={header} options={{ readOnly: true }} />
</PageSection>
<PageSection title="Payload" control={payloadControl}>
<Editor height={180} language="json" value={payload} options={{ readOnly: true }} />
</PageSection>
<div className="flex flex-col gap-3">
<PageSection title="Header" control={heaederControl}>
<Editor height={180} language="json" value={header} options={{ readOnly: true }} />
</PageSection>
<PageSection title="Payload" control={payloadControl}>
<Editor height={180} language="json" value={payload} options={{ readOnly: true }} />
</PageSection>
</div>
</PageRootSection>
);
}

14
app/encoders-decoders/url/page.tsx
View File

@@ -66,12 +66,14 @@ export default function Page() {
return (
<PageRootSection title={toolGroups.encodersDecoders.tools.url.longTitle}>
<PageSection title="Decoded" control={decodedControl}>
<Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
</PageSection>
<PageSection title="Encoded" control={encodedControl}>
<Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
</PageSection>
<div className="flex flex-col gap-3">
<PageSection title="Decoded" control={decodedControl}>
<Textarea value={form.decoded} onChange={onDecodedChange} rows={10} />
</PageSection>
<PageSection title="Encoded" control={encodedControl}>
<Textarea value={form.encoded} onChange={onEncodedChange} rows={10} />
</PageSection>
</div>
</PageRootSection>
);
}

7
app/formatters/json/page.tsx
View File

@@ -69,11 +69,8 @@ export default function Page() {
const outputControl = <ControlMenu list={[outputCopyButton]} />;
return (
<PageRootSection
className="flex h-full flex-col"
title={toolGroups.formatters.tools.json.longTitle}
>
<PageSection className="mt-0" title="Configuration">
<PageRootSection className="h-full" title={toolGroups.formatters.tools.json.longTitle}>
<PageSection title="Configuration">
<Configurations list={[indentationConfig]} />
</PageSection>
<div className="flex flex-1 flex-col gap-x-4 gap-y-5 lg:flex-row">

52
app/generators/hash/page.tsx
View File

@@ -69,33 +69,35 @@ export default function Page() {
<PageSection title="Configuration">
<Configurations list={[uppercaseConfig]} />
</PageSection>
<PageSection className="my-4" title="Input" control={inputControl}>
<PageSection className="-mt-2" title="Input" control={inputControl}>
<Textarea value={input} onChange={onInputChange} rows={5} />
</PageSection>
<PageSection title="MD5">
<div className="flex gap-2">
<Input className="flex-1" value={md5} readOnly />
<ControlMenu list={[md5CopyButton]} />
</div>
</PageSection>
<PageSection title="SHA1">
<div className="flex gap-2">
<Input className="flex-1" value={sha1} readOnly />
<ControlMenu list={[sha1CopyButton]} />
</div>
</PageSection>
<PageSection title="SHA256">
<div className="flex gap-2">
<Input className="flex-1" value={sha256} readOnly />
<ControlMenu list={[sha256CopyButton]} />
</div>
</PageSection>
<PageSection title="SHA512">
<div className="flex gap-2">
<Input className="flex-1" value={sha512} readOnly />
<ControlMenu list={[sha512CopyButton]} />
</div>
</PageSection>
<div className="flex flex-col gap-3">
<PageSection title="MD5">
<div className="flex gap-2">
<Input className="flex-1" value={md5} readOnly />
<ControlMenu list={[md5CopyButton]} />
</div>
</PageSection>
<PageSection title="SHA1">
<div className="flex gap-2">
<Input className="flex-1" value={sha1} readOnly />
<ControlMenu list={[sha1CopyButton]} />
</div>
</PageSection>
<PageSection title="SHA256">
<div className="flex gap-2">
<Input className="flex-1" value={sha256} readOnly />
<ControlMenu list={[sha256CopyButton]} />
</div>
</PageSection>
<PageSection title="SHA512">
<div className="flex gap-2">
<Input className="flex-1" value={sha512} readOnly />
<ControlMenu list={[sha512CopyButton]} />
</div>
</PageSection>
</div>
</PageRootSection>
);
}

4
app/generators/uuid/page.tsx
View File

@@ -126,7 +126,7 @@ export default function Page() {
<PageSection title="Configuration">
<Configurations list={[hyphensConfig, uppercaseConfig, uuidVersionConfig]} />
</PageSection>
<PageSection className="mt-6" title="Generate">
<PageSection title="Generate">
<div className="flex items-center gap-2">
<Button variant="secondary" onClick={onGenerateClick}>
Generate UUID(s)
@@ -140,7 +140,7 @@ export default function Page() {
/>
</div>
</PageSection>
<PageSection title="UUID(s)" control={uuidsControl}>
<PageSection className="-mt-3" title="UUID(s)" control={uuidsControl}>
<Textarea {...{ ref }} value={uuidsString} rows={10} readOnly />
</PageSection>
</PageRootSection>

2
components/configurations.tsx
View File

@@ -7,7 +7,7 @@ type Props = {
function RawConfigurations({ list }: Props) {
return (
<ul className="space-y-1.5">
<ul className="flex flex-col gap-1.5">
{list.map((config, i) => (
// re-render does not change the order
// eslint-disable-next-line react/no-array-index-key

6
components/page-root-section.tsx
View File

@@ -1,3 +1,5 @@
import { cn } from "@/lib/style";
type Props = {
className?: string;
children: React.ReactNode;
@@ -6,8 +8,8 @@ type Props = {
export function PageRootSection({ className, children, title }: Props) {
return (
<section {...{ className }}>
<h1 className="mb-6 text-2xl">{title}</h1>
<section className={cn("flex flex-col gap-6", className)}>
<h1 className="text-2xl">{title}</h1>
{children}
</section>
);

10
components/page-section.tsx
View File

@@ -9,14 +9,14 @@ type Props = {
export function PageSection({ className, children, title, control }: Props) {
return (
<section className={cn("mt-3 flex flex-col", className)}>
<section className={cn("flex flex-col gap-1.5", className)}>
{control ? (
<div className="mb-1.5 flex w-full items-end">
<h2 className="text-base">{title}</h2>
<div className="ml-auto">{control}</div>
<div className="flex justify-between">
<h2 className="self-end text-base">{title}</h2>
<div>{control}</div>
</div>
) : (
<h2 className="mb-1.5 text-base">{title}</h2>
<h2 className="text-base">{title}</h2>
)}
{children}
</section>

2
components/sidebar/tool-groups.tsx
View File

@@ -24,7 +24,7 @@ export function ToolGroups() {
return (
<Accordion.Root type="multiple" value={expandedGroups} onValueChange={setExpandedGroups}>
<ul className="space-y-1">
<ul className="flex flex-col gap-1">
{Object.values(toolGroups).map(group => (
<li key={group.href}>
<ToolGroup {...group} isOpend={expandedGroups.includes(group.href)} />

10
components/tool-card.tsx
View File

@@ -7,14 +7,16 @@ export type ToolCardProps = Pick<Tool, "Icon" | "longTitle" | "description" | "h
export function ToolCard({ Icon, longTitle, description, href }: ToolCardProps) {
return (
<Link className="rounded" {...{ href }}>
<div className="group flex h-80 w-44 flex-col items-center overflow-hidden rounded border bg-card p-5 pt-0 text-card-foreground hover:bg-card-hover">
<div className="flex h-44 shrink-0 items-center">
<div className="group flex h-80 w-44 flex-col items-center gap-5 overflow-hidden rounded border bg-card p-5 text-card-foreground hover:bg-card-hover">
<div className="flex flex-col p-5">
<div className="rounded bg-card-icon p-4 group-hover:bg-card-icon-hover">
<Icon size={64} />
</div>
</div>
<h2 className="w-full font-semibold">{longTitle}</h2>
<p className="mt-1.5 w-full text-xs text-card-muted-foreground">{description}</p>
<div className="flex flex-1 flex-col gap-1.5">
<h2 className="font-semibold">{longTitle}</h2>
<p className="text-xs text-card-muted-foreground">{description}</p>
</div>
</div>
</Link>
);