calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-01-31 23:29:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

clean up info box

Browse Source
This commit is contained in:
miloschwartz
2025-11-13 21:48:37 -05:00
parent 8674ca931b
commit 0798a0c6c2
2 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/InfoSection.tsx
View File

@@ -50,5 +50,11 @@ export function InfoSectionContent({
children: React.ReactNode;
className?: string;
}) {
return <div className={cn("break-words", className)}>{children}</div>;
return (
<div className={cn("min-w-0 overflow-hidden", className)}>
<div className="w-full truncate [&>div.flex]:min-w-0 [&>div.flex]:!whitespace-normal [&>div.flex>span]:truncate [&>div.flex>a]:truncate">
{children}
</div>
</div>
);
}

26
src/components/ResourceInfoBox.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { ShieldCheck, ShieldOff } from "lucide-react";
import { ShieldCheck, ShieldOff, Eye, EyeOff } from "lucide-react";
import { useResourceContext } from "@app/hooks/useResourceContext";
import CopyToClipboard from "@app/components/CopyToClipboard";
import {
@@ -54,12 +54,12 @@ export default function ResourceInfoBox({ }: ResourceInfoBoxType) {
authInfo.whitelist ||
authInfo.headerAuth ? (
<div className="flex items-start space-x-2 text-green-500">
<ShieldCheck className="w-4 h-4 mt-0.5" />
<ShieldCheck className="w-4 h-4 mt-0.5 flex-shrink-0" />
<span>{t("protected")}</span>
</div>
) : (
<div className="flex items-center space-x-2 text-yellow-500">
<ShieldOff className="w-4 h-4" />
<ShieldOff className="w-4 h-4 flex-shrink-0" />
<span>{t("notProtected")}</span>
</div>
)}
@@ -100,9 +100,7 @@ export default function ResourceInfoBox({ }: ResourceInfoBoxType) {
{t("protocol")}
</InfoSectionTitle>
<InfoSectionContent>
<span>
{resource.protocol.toUpperCase()}
</span>
{resource.protocol.toUpperCase()}
</InfoSectionContent>
</InfoSection>
<InfoSection>
@@ -164,11 +162,17 @@ export default function ResourceInfoBox({ }: ResourceInfoBoxType) {
<InfoSection>
<InfoSectionTitle>{t("visibility")}</InfoSectionTitle>
<InfoSectionContent>
<span>
{resource.enabled
? t("enabled")
: t("disabled")}
</span>
{resource.enabled ? (
<div className="flex items-center space-x-2 text-green-500">
<Eye className="w-4 h-4 flex-shrink-0" />
<span>{t("enabled")}</span>
</div>
) : (
<div className="flex items-center space-x-2 text-neutral-500">
<EyeOff className="w-4 h-4 flex-shrink-0" />
<span>{t("disabled")}</span>
</div>
)}
</InfoSectionContent>
</InfoSection>
</InfoSections>