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

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>
);