pangolin_mirror/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-02-24 22:06:38 +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; children: React.ReactNode;
className?: string; 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"; "use client";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; 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 { useResourceContext } from "@app/hooks/useResourceContext";
import CopyToClipboard from "@app/components/CopyToClipboard"; import CopyToClipboard from "@app/components/CopyToClipboard";
import { import {
@@ -54,12 +54,12 @@ export default function ResourceInfoBox({ }: ResourceInfoBoxType) {
authInfo.whitelist || authInfo.whitelist ||
authInfo.headerAuth ? ( authInfo.headerAuth ? (
<div className="flex items-start space-x-2 text-green-500"> <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> <span>{t("protected")}</span>
</div> </div>
) : ( ) : (
<div className="flex items-center space-x-2 text-yellow-500"> <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> <span>{t("notProtected")}</span>
</div> </div>
)} )}
@@ -100,9 +100,7 @@ export default function ResourceInfoBox({ }: ResourceInfoBoxType) {
{t("protocol")} {t("protocol")}
</InfoSectionTitle> </InfoSectionTitle>
<InfoSectionContent> <InfoSectionContent>
<span> {resource.protocol.toUpperCase()}
{resource.protocol.toUpperCase()}
</span>
</InfoSectionContent> </InfoSectionContent>
</InfoSection> </InfoSection>
<InfoSection> <InfoSection>
@@ -164,11 +162,17 @@ export default function ResourceInfoBox({ }: ResourceInfoBoxType) {
<InfoSection> <InfoSection>
<InfoSectionTitle>{t("visibility")}</InfoSectionTitle> <InfoSectionTitle>{t("visibility")}</InfoSectionTitle>
<InfoSectionContent> <InfoSectionContent>
<span> {resource.enabled ? (
{resource.enabled <div className="flex items-center space-x-2 text-green-500">
? t("enabled") <Eye className="w-4 h-4 flex-shrink-0" />
: t("disabled")} <span>{t("enabled")}</span>
</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> </InfoSectionContent>
</InfoSection> </InfoSection>
</InfoSections> </InfoSections>