Skip to content

Flex wrap for the preview and the parameters #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ddundee wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Flex wrap for the preview and the parameters #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fe8dcc4
feat:changed layout
Ddundee Nov 11, 2024
4546315
bug:fixed styling issues
Ddundee Nov 11, 2024
648206e
centered components
Ddundee Nov 13, 2024
0b9f1e4
Merge branch 'main' into main
Ddundee Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 41 additions & 39 deletions src/app/(tools)/rounded-border/rounded-tool.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,8 +183,8 @@ function RoundedToolCore(props: { fileUploaderProps: FileUploaderResult }) {
}

return (
<div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-6 p-6">
<div className="flex w-full flex-col items-center gap-4 rounded-xl p-6">
<div className="mx-auto flex max-w-7xl flex-wrap items-center justify-evenly gap-12 p-6 lg:flex-nowrap">
<div className="flex w-full max-w-fit flex-col items-center gap-4 rounded-xl p-6">
<ImageRenderer
imageContent={imageContent}
radius={radius}
Expand All @@ -195,46 +195,48 @@ function RoundedToolCore(props: { fileUploaderProps: FileUploaderResult }) {
</p>
</div>

<div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
<span className="text-sm text-white/60">Original Size</span>
<span className="font-medium text-white">
{imageMetadata.width} × {imageMetadata.height}
</span>
</div>

<BorderRadiusSelector
title="Border Radius"
options={[2, 4, 8, 16, 32, 64]}
selected={isCustomRadius ? "custom" : radius}
onChange={handleRadiusChange}
customValue={radius}
onCustomValueChange={setRadius}
/>
<section className="flex max-w-2xl flex-col items-center justify-center gap-6 p-6">
<div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
<span className="text-sm text-white/60">Original Size</span>
<span className="font-medium text-white">
{imageMetadata.width} × {imageMetadata.height}
</span>
</div>

<OptionSelector
title="Background"
options={["white", "black", "transparent"]}
selected={background}
onChange={setBackground}
formatOption={(option) =>
option.charAt(0).toUpperCase() + option.slice(1)
}
/>
<BorderRadiusSelector
title="Border Radius"
options={[2, 4, 8, 16, 32, 64]}
selected={isCustomRadius ? "custom" : radius}
onChange={handleRadiusChange}
customValue={radius}
onCustomValueChange={setRadius}
/>

<div className="flex gap-3">
<button
onClick={cancel}
className="rounded-lg bg-red-700 px-4 py-2 text-sm font-medium text-white/90 transition-colors hover:bg-red-800"
>
Cancel
</button>
<SaveAsPngButton
imageContent={imageContent}
radius={radius}
background={background}
imageMetadata={imageMetadata}
<OptionSelector
title="Background"
options={["white", "black", "transparent"]}
selected={background}
onChange={setBackground}
formatOption={(option) =>
option.charAt(0).toUpperCase() + option.slice(1)
}
/>
</div>

<div className="flex gap-3">
<button
onClick={cancel}
className="rounded-lg bg-red-700 px-4 py-2 text-sm font-medium text-white/90 transition-colors hover:bg-red-800"
>
Cancel
</button>
<SaveAsPngButton
imageContent={imageContent}
radius={radius}
background={background}
imageMetadata={imageMetadata}
/>
</div>
</section>
</div>
);
}
Expand Down
95 changes: 50 additions & 45 deletions src/app/(tools)/square-image/square-tool.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,60 +79,65 @@ function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
}

return (
<div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-6 p-6">
<div className="flex w-full flex-col items-center gap-4 rounded-xl p-6">
<div className="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-12 p-6 lg:flex-nowrap">
<div className="flex w-full max-w-fit flex-col items-center gap-4 rounded-xl p-6">
{squareImageContent && (
<img src={squareImageContent} alt="Preview" className="mb-4" />
<img
src={squareImageContent}
alt="Preview"
className="mb-4 max-h-[600px]"
/>
)}
<p className="text-lg font-medium text-white/80">
{imageMetadata.name}
</p>
</div>

<div className="flex gap-6 text-base">
<div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
<span className="text-sm text-white/60">Original</span>
<span className="font-medium text-white">
{imageMetadata.width} × {imageMetadata.height}
</span>
<section className="flex min-w-fit max-w-2xl flex-col items-center justify-center gap-6 p-6">
<div className="flex gap-6 text-base">
<div className="flex min-w-fit flex-col items-center rounded-lg bg-white/5 p-3">
<span className="text-sm text-white/60">Original</span>
<span className="font-medium text-white">
{imageMetadata.width} × {imageMetadata.height}
</span>
</div>

<div className="flex min-w-fit flex-col items-center rounded-lg bg-white/5 p-3">
<span className="text-sm text-white/60">Square Size</span>
<span className="font-medium text-white">
{Math.max(imageMetadata.width, imageMetadata.height)} ×{" "}
{Math.max(imageMetadata.width, imageMetadata.height)}
</span>
</div>
</div>

<div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
<span className="text-sm text-white/60">Square Size</span>
<span className="font-medium text-white">
{Math.max(imageMetadata.width, imageMetadata.height)} ×{" "}
{Math.max(imageMetadata.width, imageMetadata.height)}
</span>
<OptionSelector
title="Background Color"
options={["white", "black"]}
selected={backgroundColor}
onChange={setBackgroundColor}
formatOption={(option) =>
option.charAt(0).toUpperCase() + option.slice(1)
}
/>

<div className="flex gap-3">
<button
onClick={cancel}
className="rounded-lg bg-red-700 px-4 py-2 text-sm font-medium text-white/90 transition-colors hover:bg-red-800"
>
Cancel
</button>
<button
onClick={() => {
plausible("create-square-image");
handleSaveImage();
}}
className="rounded-lg bg-green-700 px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-200 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
>
Save Image
</button>
</div>
</div>

<OptionSelector
title="Background Color"
options={["white", "black"]}
selected={backgroundColor}
onChange={setBackgroundColor}
formatOption={(option) =>
option.charAt(0).toUpperCase() + option.slice(1)
}
/>

<div className="flex gap-3">
<button
onClick={cancel}
className="rounded-lg bg-red-700 px-4 py-2 text-sm font-medium text-white/90 transition-colors hover:bg-red-800"
>
Cancel
</button>
<button
onClick={() => {
plausible("create-square-image");
handleSaveImage();
}}
className="rounded-lg bg-green-700 px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-200 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
>
Save Image
</button>
</div>
</section>
</div>
);
}
Expand Down
85 changes: 43 additions & 42 deletions src/app/(tools)/svg-to-png/svg-tool.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,57 +161,58 @@ function SVGToolCore(props: { fileUploaderProps: FileUploaderResult }) {
);

return (
<div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-6 p-6">
<div className="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-12 p-6 lg:flex-nowrap">
{/* Preview Section */}
<div className="flex w-full flex-col items-center gap-4 rounded-xl p-6">
<div className="flex w-full max-w-fit flex-col items-center gap-4 rounded-xl p-6">
<SVGRenderer svgContent={rawContent} />
<p className="text-lg font-medium text-white/80">
{imageMetadata.name}
</p>
</div>

{/* Size Information */}
<div className="flex gap-6 text-base">
<div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
<span className="text-sm text-white/60">Original</span>
<span className="font-medium text-white">
{imageMetadata.width} × {imageMetadata.height}
</span>
<section className="flex max-w-2xl flex-col items-center justify-center gap-6 p-6">
{/* Size Information */}
<div className="flex gap-6 text-base">
<div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
<span className="text-sm text-white/60">Original</span>
<span className="font-medium text-white">
{imageMetadata.width} × {imageMetadata.height}
</span>
</div>

<div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
<span className="text-sm text-white/60">Scaled</span>
<span className="font-medium text-white">
{imageMetadata.width * effectiveScale} ×{" "}
{imageMetadata.height * effectiveScale}
</span>
</div>
</div>

<div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
<span className="text-sm text-white/60">Scaled</span>
<span className="font-medium text-white">
{imageMetadata.width * effectiveScale} ×{" "}
{imageMetadata.height * effectiveScale}
</span>
</div>
</div>

{/* Scale Controls */}
<SVGScaleSelector
title="Scale Factor"
options={[1, 2, 4, 8, 16, 32, 64]}
selected={scale}
onChange={setScale}
customValue={customScale}
onCustomValueChange={setCustomScale}
/>

{/* Action Buttons */}
<div className="flex gap-3">
<button
onClick={cancel}
className="rounded-lg bg-red-700 px-4 py-2 text-sm font-medium text-white/90 transition-colors hover:bg-red-800"
>
Cancel
</button>
<SaveAsPngButton
svgContent={rawContent}
scale={effectiveScale}
imageMetadata={imageMetadata}
{/* Scale Controls */}
<SVGScaleSelector
title="Scale Factor"
options={[1, 2, 4, 8, 16, 32, 64]}
selected={scale}
onChange={setScale}
customValue={customScale}
onCustomValueChange={setCustomScale}
/>
</div>

{/* Action Buttons */}
<div className="flex gap-3">
<button
onClick={cancel}
className="rounded-lg bg-red-700 px-4 py-2 text-sm font-medium text-white/90 transition-colors hover:bg-red-800"
>
Cancel
</button>
<SaveAsPngButton
svgContent={rawContent}
scale={effectiveScale}
imageMetadata={imageMetadata}
/>
</div>
</section>
</div>
);
}
Expand Down