better card spacing and removal of shenanigans

Author: tg339

apps/framework-docs-v2/src/components/mdx/template-card.tsx

@@ -92,79 +92,71 @@ export function TemplateCard({ item, className }: TemplateCardProps) {
         className,
       )}
     >
-      <CardHeader>
-        <div className="flex items-start justify-between gap-2">
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-1 mb-2">
-              {(() => {
-                const labels: string[] = [];
-                if (language) {
-                  labels.push(
-                    language === "typescript" ? "TypeScript" : "Python",
-                  );
-                }
-                if (isTemplate && template) {
-                  labels.push(categoryLabels[template.category]);
-                }
-                if (!isTemplate) {
-                  labels.push("Demo App");
-                }
-                return (
-                  <span className="text-xs text-muted-foreground">
-                    {labels.join(" • ")}
-                  </span>
-                );
-              })()}
-            </div>
-            <h3 className="text-xl  text-foreground mb-1">
-              {isTemplate ? formatTemplateName(name) : name}
-            </h3>
-            {allChips.length > 0 && (
-              <div className="flex flex-wrap gap-1.5 justify-start w-full mt-2">
-                {visibleChips.map((chip) => (
-                  <Badge
-                    key={`${chip.type}-${chip.value}`}
-                    variant={
-                      chip.type === "framework" ? "secondary" : "outline"
-                    }
-                    className="text-xs"
-                  >
-                    {chip.value}
-                  </Badge>
-                ))}
-                {!chipsExpanded && hiddenCount > 0 && (
-                  <Badge
-                    variant="outline"
-                    className="text-xs cursor-pointer hover:bg-accent"
-                    onClick={() => setChipsExpanded(true)}
-                  >
-                    {hiddenCount} more
-                  </Badge>
-                )}
-                {chipsExpanded && (
-                  <Badge
-                    variant="outline"
-                    className="text-xs cursor-pointer hover:bg-accent"
-                    onClick={() => setChipsExpanded(false)}
-                  >
-                    Show less
-                  </Badge>
-                )}
-              </div>
+      <CardHeader className="gap-2">
+        <div className="flex items-center gap-1">
+          {(() => {
+            const labels: string[] = [];
+            if (language) {
+              labels.push(language === "typescript" ? "TypeScript" : "Python");
+            }
+            if (isTemplate && template) {
+              labels.push(categoryLabels[template.category]);
+            }
+            if (!isTemplate) {
+              labels.push("Demo App");
+            }
+            return (
+              <span className="text-xs text-muted-foreground">
+                {labels.join(" • ")}
+              </span>
+            );
+          })()}
+        </div>
+        <h3 className="text-xl  text-foreground ">
+          {isTemplate ? formatTemplateName(name) : name}
+        </h3>
+        {allChips.length > 0 && (
+          <div className="flex flex-wrap gap-1.5 justify-start w-full">
+            {visibleChips.map((chip) => (
+              <Badge
+                key={`${chip.type}-${chip.value}`}
+                variant={chip.type === "framework" ? "secondary" : "outline"}
+                className="text-xs"
+              >
+                {chip.value}
+              </Badge>
+            ))}
+            {!chipsExpanded && hiddenCount > 0 && (
+              <Badge
+                variant="outline"
+                className="text-xs cursor-pointer hover:bg-accent"
+                onClick={() => setChipsExpanded(true)}
+              >
+                {hiddenCount} more
+              </Badge>
+            )}
+            {chipsExpanded && (
+              <Badge
+                variant="outline"
+                className="text-xs cursor-pointer hover:bg-accent"
+                onClick={() => setChipsExpanded(false)}
+              >
+                Show less
+              </Badge>
             )}
           </div>
-        </div>
+        )}
       </CardHeader>
-      <CardContent className="flex-1 flex flex-col">
-        <CardDescription className="mb-4 flex-1">{description}</CardDescription>
+      <CardContent className="flex-1 flex flex-col gap-5">
+        <CardDescription className="flex-1">{description}</CardDescription>
         {isTemplate && template && (
           <div className="w-full min-w-0">
             <ShellSnippet code={template.initCommand} />
           </div>
         )}
       </CardContent>
-      <CardFooter className="flex flex-col gap-2 pt-4 w-full">
-        <div className="flex w-full items-center justify-start gap-2 mt-auto pt-2">
+      <CardFooter className="flex flex-col gap-2 w-full">
+        <div className="flex w-full items-center justify-start gap-2 mt-auto">
           <Button variant="default" asChild>
             <Link
               href={`https://moose.dev/deploy?template=${isTemplate ? template!.slug : app!.slug}`}