jake/hoot
1
Fork 0
mirror of https://github.com/jakejarvis/hoot.git synced 2025-10-18 20:14:25 -04:00
Code Issues Activity

Refactor KeyValueGrid component to use mobile and desktop column props for improved responsiveness

Browse Source
This commit is contained in:
Jake Jarvis
2025-10-14 19:38:23 -04:00
parent 0dbf4f99c9
commit 282fa3c385
6 changed files with 30 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/domain/key-value-grid.tsx
View File

@@ -3,29 +3,30 @@ import { cn } from "@/lib/utils";
export function KeyValueGrid({
children,
className,
colsSm = 2,
colsMd,
colsLg,
colsMobile = 1,
colsDesktop,
}: {
children: React.ReactNode;
className?: string;
colsSm?: 1 | 2 | 3 | 4;
colsMd?: 1 | 2 | 3 | 4;
colsLg?: 1 | 2 | 3 | 4;
colsMobile?: 1 | 2 | 3;
colsDesktop?: 1 | 2 | 3;
}) {
const smClass = `sm:grid-cols-${colsSm}`;
const mdClass = colsMd ? `md:grid-cols-${colsMd}` : undefined;
const lgClass = colsLg ? `lg:grid-cols-${colsLg}` : undefined;
// Tailwind requires static class names; map numeric props to explicit classes
const baseClassMap: Record<1 | 2 | 3, string> = {
1: "grid-cols-1",
2: "grid-cols-2",
3: "grid-cols-3",
};
const desktopClassMap: Record<1 | 2 | 3, string> = {
1: "sm:grid-cols-1",
2: "sm:grid-cols-2",
3: "sm:grid-cols-3",
};
const mobileClass = baseClassMap[colsMobile];
const desktopClass = colsDesktop ? desktopClassMap[colsDesktop] : undefined;
return (
<div
className={cn(
"grid grid-cols-1 gap-2",
smClass,
mdClass,
lgClass,
className,
)}
>
<div className={cn("grid gap-2", mobileClass, desktopClass, className)}>
{children}
</div>
);

6
components/domain/sections/certificates-section.tsx
View File

@@ -58,7 +58,7 @@ export function CertificatesSection({
{isLoading ? (
<>
<div className="relative overflow-hidden rounded-2xl border border-black/5 bg-background/40 p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur supports-[backdrop-filter]:bg-background/40 dark:border-white/5">
<KeyValueGrid colsSm={2}>
<KeyValueGrid colsDesktop={2}>
<KeyValueSkeleton
label="Issuer"
widthClass="w-[100px]"
@@ -83,7 +83,7 @@ export function CertificatesSection({
key={`cert-${firstCert.subject}-${firstCert.validFrom}-${firstCert.validTo}`}
>
<div className="relative mb-0 overflow-hidden rounded-2xl border border-black/5 bg-background/40 p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur supports-[backdrop-filter]:bg-background/40 dark:border-white/5">
<KeyValueGrid colsSm={2}>
<KeyValueGrid colsDesktop={2}>
<KeyValue
label="Issuer"
value={firstCert.issuer}
@@ -192,7 +192,7 @@ export function CertificatesSection({
key={`cert-${c.subject}-${c.validFrom}-${c.validTo}`}
>
<div className="relative overflow-hidden rounded-2xl border border-black/5 bg-background/40 p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur supports-[backdrop-filter]:bg-background/40 dark:border-white/5">
<KeyValueGrid colsSm={2}>
<KeyValueGrid colsDesktop={2}>
<KeyValue
label="Issuer"
value={c.issuer}

4
components/domain/sections/headers-section.tsx
View File

@@ -36,7 +36,7 @@ export function HeadersSection({
data={data ?? null}
isEmpty={(d) => !Array.isArray(d) || d.length === 0}
renderLoading={() => (
<KeyValueGrid colsSm={2}>
<KeyValueGrid colsDesktop={2}>
<KeyValueSkeletonList
count={12}
widthClass="w-[100px]"
@@ -45,7 +45,7 @@ export function HeadersSection({
</KeyValueGrid>
)}
renderData={(d) => (
<KeyValueGrid colsSm={2}>
<KeyValueGrid colsDesktop={2}>
{(() => {
const important = new Set([
"strict-transport-security",

4
components/domain/sections/hosting-email-section.tsx
View File

@@ -45,7 +45,7 @@ export function HostingEmailSection({
<Section {...SECTION_DEFS.hosting} isError={isError} isLoading={isLoading}>
{isLoading ? (
<>
<KeyValueGrid colsSm={3}>
<KeyValueGrid colsDesktop={3}>
<KeyValueSkeleton label="DNS" withLeading widthClass="w-[100px]" />
<KeyValueSkeleton
label="Hosting"
@@ -70,7 +70,7 @@ export function HostingEmailSection({
</>
) : data ? (
<>
<KeyValueGrid colsSm={3} colsMd={3}>
<KeyValueGrid colsDesktop={3}>
<KeyValue
label="DNS"
value={data.dnsProvider.name}

4
components/domain/sections/registration-section.tsx
View File

@@ -50,7 +50,7 @@ export function RegistrationSection({
isError={isError}
data={data ?? null}
renderLoading={() => (
<KeyValueGrid colsSm={2}>
<KeyValueGrid colsDesktop={2}>
<KeyValueSkeleton label="Registrar" withLeading withSuffix />
<KeyValueSkeleton label="Registrant" />
<KeyValueSkeleton label="Created" />
@@ -58,7 +58,7 @@ export function RegistrationSection({
</KeyValueGrid>
)}
renderData={(d) => (
<KeyValueGrid colsSm={2}>
<KeyValueGrid colsDesktop={2}>
<KeyValue
label="Registrar"
value={d.registrarProvider?.name || ""}

4
components/domain/sections/seo-section.tsx
View File

@@ -120,7 +120,7 @@ export function SeoSection({
<span>Meta Tags</span>
<SubheadCount count={metaTagCount} color="orange" />
</div>
<KeyValueGrid colsSm={2} colsMd={2}>
<KeyValueGrid colsDesktop={2}>
{metaTagValues
.filter((t) => t.value != null)
.map((t) => (
@@ -810,7 +810,7 @@ function SeoSkeleton() {
Meta Tags
<SubheadCountSkeleton />
</div>
<KeyValueGrid colsSm={2} colsMd={2}>
<KeyValueGrid colsDesktop={2}>
<KeyValueSkeleton label="Title" widthClass="w-[220px]" />
<KeyValueSkeleton label="Description" widthClass="w-[260px]" />
<KeyValueSkeleton label="Canonical" widthClass="w-[200px]" />