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: drop tailwind-merge

Browse Source
This commit is contained in:
rusconn
2024-03-29 21:33:45 +09:00
parent 2741082c84
commit 4114f29818
12 changed files with 47 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -90,16 +90,16 @@ export default function Page() {
</PageSection>
<div className="flex flex-col gap-3">
<PageSection title="Decimal" control={decControl}>
<Input value={dec} onChange={onDecChange} />
<Input fontMono value={dec} onChange={onDecChange} />
</PageSection>
<PageSection title="Hexadecimal" control={hexControl}>
<Input value={hex} onChange={onHexChange} />
<Input fontMono value={hex} onChange={onHexChange} />
</PageSection>
<PageSection title="Octal" control={octControl}>
<Input value={oct} onChange={onOctChange} />
<Input fontMono value={oct} onChange={onOctChange} />
</PageSection>
<PageSection title="Binary" control={binControl}>
<Input value={bin} onChange={onBinChange} />
<Input fontMono value={bin} onChange={onBinChange} />
</PageSection>
</div>
</PageRootSection>

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

@@ -75,25 +75,25 @@ export default function Page() {
<div className="flex flex-col gap-3">
<PageSection title="MD5">
<div className="flex gap-2">
<Input className="flex-1" value={md5} readOnly />
<Input fontMono 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 />
<Input fontMono 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 />
<Input fontMono 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 />
<Input fontMono className="flex-1" value={sha512} readOnly />
<ControlMenu list={[sha512CopyButton]} />
</div>
</PageSection>

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

@@ -132,12 +132,7 @@ export default function Page() {
Generate UUID(s)
</Button>
<span>×</span>
<Input
className="w-24 font-sans"
type="number"
value={generates}
onChange={onGeneratesChange}
/>
<Input className="w-24" type="number" value={generates} onChange={onGeneratesChange} />
</div>
</PageSection>
<PageSection className="-mt-3" title="UUID(s)" control={uuidsControl}>

2
components/buttons/base.tsx
View File

@@ -9,7 +9,7 @@ export type BaseProps = ButtonProps & {
export function Base({ icon, iconOnly, labelText, ...props }: BaseProps) {
const button = (
<Button className="border" {...props}>
<Button className="inline-flex items-center border" {...props}>
{icon}
{!iconOnly && <span className="ml-1">{labelText}</span>}
</Button>

11
components/sidebar/search-bar.tsx
View File

@@ -44,18 +44,23 @@ export function SearchBar() {
<div className="relative flex items-center">
<Input
ref={inputRef}
className="w-full pr-16 font-sans"
className="w-full pr-16"
value={text}
onChange={changeText}
onKeyDown={searchIfEnter}
placeholder="Type to search for tools…"
/>
<div className="absolute right-1 flex gap-1">
<Button className={cn("h-6 p-0", !text && "hidden")} variant="ghost" onClick={clearText}>
<Button
className={cn(!text && "hidden")}
variant="ghost"
size="shorter"
onClick={clearText}
>
<icons.X className="p-1 text-muted-foreground" />
<span className="sr-only">Clear search text</span>
</Button>
<Button className="h-6 p-0" variant="ghost" onClick={search} aria-label="search">
<Button variant="ghost" size="shorter" onClick={search} aria-label="search">
<icons.Search className="-scale-x-100 p-1 text-muted-foreground" />
<span className="sr-only">Search tools</span>
</Button>

3
components/theme-toggle.tsx
View File

@@ -10,8 +10,9 @@ export function ThemeToggle() {
return (
<Button
className="h-10 w-10 p-0"
className="inline-flex aspect-square items-center justify-center"
variant="ghost"
size="taller"
onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
>
<icons.Sun className="h-7 w-7 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />

4
components/ui/button.tsx
View File

@@ -4,7 +4,7 @@ import { cva, VariantProps } from "class-variance-authority";
import { cn } from "@/lib/style";
export const buttonVariants = cva(
"inline-flex items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-50",
"transition-colors disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
@@ -14,6 +14,8 @@ export const buttonVariants = cva(
},
size: {
default: "h-9 rounded-md px-3 py-2",
taller: "h-10 rounded-md",
shorter: "h-6 rounded-md",
},
},
defaultVariants: {

13
components/ui/input.tsx
View File

@@ -3,23 +3,28 @@ import equal from "react-fast-compare";
import { cn } from "@/lib/style";
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
fontMono?: true;
};
const RawInput = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => (
const RawInput = React.forwardRef<HTMLInputElement, InputProps>(
({ className, fontMono, ...props }, ref) => (
<input
{...{ ref }}
className={cn(
"border-b-1 h-9 rounded border border-b-muted-foreground bg-input px-3 py-2 font-mono outline-none",
"border-b-1 h-9 rounded border border-b-muted-foreground bg-input px-3 py-2 outline-none",
"placeholder:text-muted-foreground",
"hover:bg-input-hover",
"focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px]",
"disabled:cursor-not-allowed disabled:opacity-50",
fontMono && "font-mono",
className
)}
spellCheck="false"
{...props}
/>
));
)
);
RawInput.displayName = "RawInput";
export const Input = React.memo(RawInput, equal);

2
components/ui/select.tsx
View File

@@ -18,7 +18,7 @@ export const Trigger = React.forwardRef<
<SelectPrimitive.Trigger
{...{ ref }}
className={cn(
"flex h-9 w-full items-center justify-between rounded-md border bg-select px-2.5 py-1.5",
"flex h-9 items-center justify-between rounded-md border bg-select px-2.5 py-1.5",
"placeholder:text-muted-foreground",
"hover:bg-select-hover",
"disabled:cursor-not-allowed disabled:opacity-50",

5
lib/style.ts
View File

@@ -1,4 +1,3 @@
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
import { clsx } from "clsx";
export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
export const cn = clsx;

1
package.json
View File

@@ -51,7 +51,6 @@
"react-dom": "18.2.0",
"react-fast-compare": "^3.2.2",
"sharp": "^0.32.1",
"tailwind-merge": "^1.12.0",
"tailwindcss-animate": "^1.0.5",
"uuid": "^9.0.0"
},

7
pnpm-lock.yaml generated
View File

@@ -79,9 +79,6 @@ dependencies:
sharp:
specifier: ^0.32.1
version: 0.32.1
tailwind-merge:
specifier: ^1.12.0
version: 1.12.0
tailwindcss-animate:
specifier: ^1.0.5
version: 1.0.5(tailwindcss@3.3.2)
@@ -4968,10 +4965,6 @@ packages:
tslib: 2.6.1
dev: true
/tailwind-merge@1.12.0:
resolution: {integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g==}
dev: false
/tailwindcss-animate@1.0.5(tailwindcss@3.3.2):
resolution: {integrity: sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==}
peerDependencies: