ershisan99/DevToysWeb
1
0
Fork 0
mirror of https://github.com/ershisan99/DevToysWeb.git synced 2025-12-16 20:49:23 +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 ( return (
<PageRootSection <PageRootSection className="h-full" title={toolGroups.converters.tools.jsonYaml.longTitle}>
className="flex h-full flex-col" <PageSection title="Configuration">
title={toolGroups.converters.tools.jsonYaml.longTitle}
>
<PageSection className="mb-6 mt-0" title="Configuration">
<Configurations list={[indentationConfig]} /> <Configurations list={[indentationConfig]} />
</PageSection> </PageSection>
<div className="flex flex-1 flex-col gap-x-4 gap-y-5 lg:flex-row"> <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} /> <Editor language="json" value={form.json} onChange={onJsonChange} />
</PageSection> </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} /> <Editor language="yaml" value={form.yaml} onChange={onYamlChange} />
</PageSection> </PageSection>
</div> </div>

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

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

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

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

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

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

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

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

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

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

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

@@ -69,11 +69,8 @@ export default function Page() {
const outputControl = <ControlMenu list={[outputCopyButton]} />; const outputControl = <ControlMenu list={[outputCopyButton]} />;
return ( return (
<PageRootSection <PageRootSection className="h-full" title={toolGroups.formatters.tools.json.longTitle}>
className="flex h-full flex-col" <PageSection title="Configuration">
title={toolGroups.formatters.tools.json.longTitle}
>
<PageSection className="mt-0" title="Configuration">
<Configurations list={[indentationConfig]} /> <Configurations list={[indentationConfig]} />
</PageSection> </PageSection>
<div className="flex flex-1 flex-col gap-x-4 gap-y-5 lg:flex-row"> <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"> <PageSection title="Configuration">
<Configurations list={[uppercaseConfig]} /> <Configurations list={[uppercaseConfig]} />
</PageSection> </PageSection>
<PageSection className="my-4" title="Input" control={inputControl}> <PageSection className="-mt-2" title="Input" control={inputControl}>
<Textarea value={input} onChange={onInputChange} rows={5} /> <Textarea value={input} onChange={onInputChange} rows={5} />
</PageSection> </PageSection>
<PageSection title="MD5"> <div className="flex flex-col gap-3">
<div className="flex gap-2"> <PageSection title="MD5">
<Input className="flex-1" value={md5} readOnly /> <div className="flex gap-2">
<ControlMenu list={[md5CopyButton]} /> <Input className="flex-1" value={md5} readOnly />
</div> <ControlMenu list={[md5CopyButton]} />
</PageSection> </div>
<PageSection title="SHA1"> </PageSection>
<div className="flex gap-2"> <PageSection title="SHA1">
<Input className="flex-1" value={sha1} readOnly /> <div className="flex gap-2">
<ControlMenu list={[sha1CopyButton]} /> <Input className="flex-1" value={sha1} readOnly />
</div> <ControlMenu list={[sha1CopyButton]} />
</PageSection> </div>
<PageSection title="SHA256"> </PageSection>
<div className="flex gap-2"> <PageSection title="SHA256">
<Input className="flex-1" value={sha256} readOnly /> <div className="flex gap-2">
<ControlMenu list={[sha256CopyButton]} /> <Input className="flex-1" value={sha256} readOnly />
</div> <ControlMenu list={[sha256CopyButton]} />
</PageSection> </div>
<PageSection title="SHA512"> </PageSection>
<div className="flex gap-2"> <PageSection title="SHA512">
<Input className="flex-1" value={sha512} readOnly /> <div className="flex gap-2">
<ControlMenu list={[sha512CopyButton]} /> <Input className="flex-1" value={sha512} readOnly />
</div> <ControlMenu list={[sha512CopyButton]} />
</PageSection> </div>
</PageSection>
</div>
</PageRootSection> </PageRootSection>
); );
} }

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

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

2
components/configurations.tsx
View File

@@ -7,7 +7,7 @@ type Props = {
function RawConfigurations({ list }: Props) { function RawConfigurations({ list }: Props) {
return ( return (
<ul className="space-y-1.5"> <ul className="flex flex-col gap-1.5">
{list.map((config, i) => ( {list.map((config, i) => (
// re-render does not change the order // re-render does not change the order
// eslint-disable-next-line react/no-array-index-key // 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 = { type Props = {
className?: string; className?: string;
children: React.ReactNode; children: React.ReactNode;
@@ -6,8 +8,8 @@ type Props = {
export function PageRootSection({ className, children, title }: Props) { export function PageRootSection({ className, children, title }: Props) {
return ( return (
<section {...{ className }}> <section className={cn("flex flex-col gap-6", className)}>
<h1 className="mb-6 text-2xl">{title}</h1> <h1 className="text-2xl">{title}</h1>
{children} {children}
</section> </section>
); );

10
components/page-section.tsx
View File

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

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

@@ -24,7 +24,7 @@ export function ToolGroups() {
return ( return (
<Accordion.Root type="multiple" value={expandedGroups} onValueChange={setExpandedGroups}> <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 => ( {Object.values(toolGroups).map(group => (
<li key={group.href}> <li key={group.href}>
<ToolGroup {...group} isOpend={expandedGroups.includes(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) { export function ToolCard({ Icon, longTitle, description, href }: ToolCardProps) {
return ( return (
<Link className="rounded" {...{ href }}> <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="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 h-44 shrink-0 items-center"> <div className="flex flex-col p-5">
<div className="rounded bg-card-icon p-4 group-hover:bg-card-icon-hover"> <div className="rounded bg-card-icon p-4 group-hover:bg-card-icon-hover">
<Icon size={64} /> <Icon size={64} />
</div> </div>
</div> </div>
<h2 className="w-full font-semibold">{longTitle}</h2> <div className="flex flex-1 flex-col gap-1.5">
<p className="mt-1.5 w-full text-xs text-card-muted-foreground">{description}</p> <h2 className="font-semibold">{longTitle}</h2>
<p className="text-xs text-card-muted-foreground">{description}</p>
</div>
</div> </div>
</Link> </Link>
); );