feat: redesign chip attribute

app/components/Attribute.tsx

@@ -6,41 +6,35 @@ export interface AttributeProps {
 	name: string;
 	value: string;
 	isCopyable?: boolean;
-	link?: string;
-	suppressHydrationWarning?: boolean;
 }
 
-export default function Attribute({
-	name,
-	value,
-	link,
-	isCopyable,
-	suppressHydrationWarning,
-}: AttributeProps) {
+export default function Attribute({ name, value, isCopyable }: AttributeProps) {
 	return (
-		<dl className="flex items-center w-full gap-x-1">
-			<dt className="font-semibold w-1/4 shrink-0 text-sm">
-				{link ? (
-					<a className="hover:underline" href={link}>
-						{name}
-					</a>
-				) : (
-					name
+		<dl className="flex gap-1 items-center text-sm">
+			<dt
+				className={cn(
+					'w-1/3 sm:w-1/4 lg:w-1/3 shrink-0 min-w-0 truncate',
+					'text-headplane-500 dark:text-headplane-400',
 				)}
+			>
+				{name}
 			</dt>
 			<dd
-				suppressHydrationWarning={suppressHydrationWarning}
 				className={cn(
-					'rounded-lg truncate w-full px-2.5 py-1 text-sm',
-					'flex items-center gap-x-1',
-					'focus-within:outline-none focus-within:ring-2',
-					isCopyable && 'hover:bg-headplane-100 dark:hover:bg-headplane-800',
+					'min-w-0 px-1.5 py-1 rounded-lg border border-transparent',
+					...(isCopyable
+						? [
+								'cursor-pointer hover:shadow-sm',
+								'hover:bg-headplane-50 dark:hover:bg-headplane-800',
+								'hover:border-headplane-100 dark:hover:border-headplane-700',
+							]
+						: []),
 				)}
 			>
 				{isCopyable ? (
 					<button
 						type="button"
-						className="w-full flex items-center gap-x-1 outline-none"
+						className="flex items-center gap-1.5 relative min-w-0 w-full"
 						onClick={async (event) => {
 							const svgs = event.currentTarget.querySelectorAll('svg');
 							for (const svg of svgs) {
@@ -48,7 +42,7 @@ export default function Attribute({
 							}
 
 							await navigator.clipboard.writeText(value);
-							toast('Copied to clipboard');
+							toast(`Copied ${name} to clipboard`);
 
 							setTimeout(() => {
 								for (const svg of svgs) {
@@ -57,17 +51,20 @@ export default function Attribute({
 							}, 1000);
 						}}
 					>
-						<p
-							suppressHydrationWarning={suppressHydrationWarning}
-							className="truncate"
-						>
+						<div suppressHydrationWarning className="truncate">
 							{value}
-						</p>
-						<Check className="h-4.5 w-4.5 p-1 hidden data-[copied]:block" />
-						<Copy className="h-4.5 w-4.5 p-1 block data-[copied]:hidden" />
+						</div>
+						{isCopyable ? (
+							<div>
+								<Check className="size-4 hidden data-[copied]:block" />
+								<Copy className="size-4 block data-[copied]:hidden" />
+							</div>
+						) : undefined}
 					</button>
 				) : (
-					value
+					<div className="relative min-w-0 truncate" suppressHydrationWarning>
+						{value}
+					</div>
 				)}
 			</dd>
 		</dl>