feat: Prettify search list

211-Connect · Nov 22, 2024 · b92bfff · b92bfff
1 parent b147862
commit b92bfff
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 158 deletions.
diff --git a/src/features/search/components/filter-panel.tsx b/src/features/search/components/filter-panel.tsx
@@ -131,7 +131,7 @@ export function FilterPanel() {
 
   return (
     <>
-      <div className="hidden w-full max-w-72 bg-white xl:block">
+      <div className="hidden w-full max-w-72 bg-white xl:block print:hidden">
         <Filters filters={filters} filterKeys={filterKeys} />
       </div>
       <Sheet onOpenChange={setFiltersOpen} open={filtersOpen}>

diff --git a/src/features/search/components/result.tsx b/src/features/search/components/result.tsx
@@ -51,168 +51,172 @@ export function Result({ data }: ResultProps) {
       : null;
 
   return (
-    <Card id={data._id}>
-      <CardHeader>
-        <div className="flex justify-between">
-          <div className="flex items-center justify-start">
-            {data.priority === 1 && (
-              <Badge variant="outline" className="flex gap-1">
-                <Pin className="size-3" />
-                Pinned
-              </Badge>
-            )}
-          </div>
-
-          <div>
-            {distance != null && distance > 0 && (
-              <Badge variant="outline" className="flex gap-1">
-                <Navigation className="size-3" />
-                {distance.toFixed(1)} {t('search.miles')}
-              </Badge>
-            )}
-          </div>
-        </div>
-
-        <CardTitle className="flex flex-row justify-between gap-2">
-          <Link
-            className="self-center text-primary hover:underline"
-            href={`/search/${data.id}`}
-          >
-            {data.name}
-          </Link>
-
-          <div>
-            <AddToFavoritesButton size="icon" serviceAtLocationId={data.id} />
-          </div>
-        </CardTitle>
-        {showServiceName && (
-          <CardDescription>{data.serviceName}</CardDescription>
-        )}
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <div className="whitespace-break-spaces">
-          {parseHtml(data.description)}
-        </div>
-
-        <div className="flex flex-col items-start justify-start gap-2">
-          {data.phone && (
-            <div className="flex max-w-full items-center gap-1 text-primary/80">
-              <Phone className="size-4 shrink-0" />
-              <CopyBadge text={data.phone} href={`tel:${data.phone}`}>
-                {data.phone}
-              </CopyBadge>
+    <>
+      <Card id={data._id} className="print:border-none print:shadow-none">
+        <CardHeader>
+          <div className="flex justify-between">
+            <div className="flex items-center justify-start">
+              {data.priority === 1 && (
+                <Badge variant="outline" className="flex gap-1">
+                  <Pin className="size-3" />
+                  Pinned
+                </Badge>
+              )}
             </div>
-          )}
 
-          {data.address ? (
-            <div className="flex max-w-full items-center gap-1 text-primary/80">
-              <MapPin className="size-4 shrink-0" />
-              <CopyBadge
-                text={data.address}
-                href={getGoogleMapsDestinationUrl(
-                  coords,
-                  data?.location?.coordinates,
-                )}
-              >
-                {data.address}
-              </CopyBadge>
+            <div>
+              {distance != null && distance > 0 && (
+                <Badge variant="outline" className="flex gap-1">
+                  <Navigation className="size-3" />
+                  {distance.toFixed(1)} {t('search.miles')}
+                </Badge>
+              )}
             </div>
-          ) : (
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger>
-                  <div className="flex max-w-full items-center gap-1">
-                    <MapPin className="size-4 shrink-0 text-primary" />
-                    <p className="truncate text-xs font-semibold">
-                      {t('search.address_unavailable')}
-                    </p>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent className="max-w-64" side="right">
-                  <p>{t('search.confidential_address')}</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          )}
+          </div>
+
+          <CardTitle className="flex flex-row justify-between gap-2">
+            <Link
+              className="self-center text-primary hover:underline"
+              href={`/search/${data.id}`}
+            >
+              {data.name}
+            </Link>
 
-          {data.website && (
-            <div className="flex max-w-full items-center gap-1 text-primary/80">
-              <Globe className="size-4 shrink-0" />
-              <CopyBadge href={data.website} text={data.website}>
-                <p className="truncate">{data.website}</p>
-              </CopyBadge>
+            <div className="print:hidden">
+              <AddToFavoritesButton size="icon" serviceAtLocationId={data.id} />
             </div>
+          </CardTitle>
+          {showServiceName && (
+            <CardDescription>{data.serviceName}</CardDescription>
           )}
+        </CardHeader>
+        <CardContent className="flex flex-col gap-4">
+          <div className="whitespace-break-spaces">
+            {parseHtml(data.description)}
+          </div>
 
-          {data.taxonomies && data.taxonomies.length > 0 && (
-            <>
-              <Separator />
-
-              <p className="text-sm font-semibold">
-                {t('categories_text', {
-                  ns: 'dynamic',
-                  defaultValue: t('categories', { ns: 'page-resource' }),
-                })}
-              </p>
-
-              <div className="flex flex-wrap gap-1">
-                {data.taxonomies.map((tax) => (
-                  <Badge key={tax.name} variant="default">
-                    {tax.name}
-                  </Badge>
-                ))}
+          <div className="flex flex-col items-start justify-start gap-2">
+            {data.phone && (
+              <div className="flex max-w-full items-center gap-1 text-primary/80">
+                <Phone className="size-4 shrink-0" />
+                <CopyBadge text={data.phone} href={`tel:${data.phone}`}>
+                  {data.phone}
+                </CopyBadge>
               </div>
-            </>
-          )}
-        </div>
-      </CardContent>
-      <CardFooter className="flex flex-col gap-2">
-        <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center">
-          <ReferralButton
-            className="flex-1 gap-1"
-            size="sm"
-            disabled={!data.phone}
-            referralType="call_referral"
-            resourceId={data.id}
-            resourceData={data}
-            variant="highlight"
-            onClick={() => {
-              window.open(`tel:${data.phone}`);
-            }}
-          >
-            <Phone className="size-4" /> {t('call_to_action.call')}
-          </ReferralButton>
-
-          <ReferralButton
-            className="flex-1 gap-1"
-            referralType="website_referral"
-            size="sm"
-            resourceId={data.id}
-            resourceData={data}
-            disabled={!data.website}
-            variant="highlight"
-            onClick={() => {
-              window.open(data.website, '_blank');
-            }}
-          >
-            <Globe className="size-4" /> {t('call_to_action.view_website')}
-          </ReferralButton>
-
-          <GetDirectionsButton data={data} coords={coords} />
-        </div>
-
-        <div className="flex w-full items-center gap-2">
-          <Link
-            className={cn(
-              'flex-1 gap-1 text-primary',
-              buttonVariants({ variant: 'ghost' }),
             )}
-            href={`/search/${data.id}`}
-          >
-            <LinkIcon className="size-4" /> {t('call_to_action.view_details')}
-          </Link>
-        </div>
-      </CardFooter>
-    </Card>
+
+            {data.address ? (
+              <div className="flex max-w-full items-center gap-1 text-primary/80">
+                <MapPin className="size-4 shrink-0" />
+                <CopyBadge
+                  text={data.address}
+                  href={getGoogleMapsDestinationUrl(
+                    coords,
+                    data?.location?.coordinates,
+                  )}
+                >
+                  {data.address}
+                </CopyBadge>
+              </div>
+            ) : (
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger>
+                    <div className="flex max-w-full items-center gap-1">
+                      <MapPin className="size-4 shrink-0 text-primary" />
+                      <p className="truncate text-xs font-semibold">
+                        {t('search.address_unavailable')}
+                      </p>
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent className="max-w-64" side="right">
+                    <p>{t('search.confidential_address')}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+
+            {data.website && (
+              <div className="flex max-w-full items-center gap-1 text-primary/80">
+                <Globe className="size-4 shrink-0" />
+                <CopyBadge href={data.website} text={data.website}>
+                  <p className="truncate">{data.website}</p>
+                </CopyBadge>
+              </div>
+            )}
+
+            {data.taxonomies && data.taxonomies.length > 0 && (
+              <>
+                <Separator className="print:hidden" />
+
+                <p className="text-sm font-semibold print:hidden">
+                  {t('categories_text', {
+                    ns: 'dynamic',
+                    defaultValue: t('categories', { ns: 'page-resource' }),
+                  })}
+                </p>
+
+                <div className="flex flex-wrap gap-1 print:hidden">
+                  {data.taxonomies.map((tax) => (
+                    <Badge key={tax.name} variant="default">
+                      {tax.name}
+                    </Badge>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        </CardContent>
+        <CardFooter className="flex flex-col gap-2 print:hidden">
+          <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center">
+            <ReferralButton
+              className="flex-1 gap-1"
+              size="sm"
+              disabled={!data.phone}
+              referralType="call_referral"
+              resourceId={data.id}
+              resourceData={data}
+              variant="highlight"
+              onClick={() => {
+                window.open(`tel:${data.phone}`);
+              }}
+            >
+              <Phone className="size-4" /> {t('call_to_action.call')}
+            </ReferralButton>
+
+            <ReferralButton
+              className="flex-1 gap-1"
+              referralType="website_referral"
+              size="sm"
+              resourceId={data.id}
+              resourceData={data}
+              disabled={!data.website}
+              variant="highlight"
+              onClick={() => {
+                window.open(data.website, '_blank');
+              }}
+            >
+              <Globe className="size-4" /> {t('call_to_action.view_website')}
+            </ReferralButton>
+
+            <GetDirectionsButton data={data} coords={coords} />
+          </div>
+
+          <div className="flex w-full items-center gap-2">
+            <Link
+              className={cn(
+                'flex-1 gap-1 text-primary',
+                buttonVariants({ variant: 'ghost' }),
+              )}
+              href={`/search/${data.id}`}
+            >
+              <LinkIcon className="size-4" /> {t('call_to_action.view_details')}
+            </Link>
+          </div>
+        </CardFooter>
+      </Card>
+
+      <Separator className="hidden border-b border-black bg-none print:block" />
+    </>
   );
 }
diff --git a/src/features/search/components/results-section.tsx b/src/features/search/components/results-section.tsx
@@ -19,7 +19,7 @@ export function ResultsSection() {
       id="search-container"
       className="flex w-full flex-col overflow-y-auto lg:max-w-[550px]"
     >
-      <div className="flex flex-col gap-2 bg-white p-2">
+      <div className="flex flex-col gap-2 bg-white p-2 print:hidden">
         <MainSearchLayout />
 
         <TaxonomyContainer />

diff --git a/src/shared/components/footer.tsx b/src/shared/components/footer.tsx
@@ -26,7 +26,7 @@ export function Footer(props: Props) {
             {t('footer.copyright')}
           </p>
 
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-4 print:hidden">
             <Link href="/legal/privacy-policy">
               {t('footer.privacy_policy')}
             </Link>

diff --git a/src/shared/components/header.tsx b/src/shared/components/header.tsx
@@ -182,7 +182,7 @@ export function Header(props: Props) {
   );
 
   return (
-    <header id={HEADER_ID} className="border-b bg-white">
+    <header id={HEADER_ID} className="border-b bg-white print:hidden">
       <div
         className={cn(
           props.fullWidth ? '100%' : 'container mx-auto',