better layout

Author: mehdibha

www/src/app/(home)/layout.tsx

@@ -12,7 +12,7 @@ export default function HomeLayout({
     <div>
       <Header className="hidden md:block" />
       <MobileNav items={source.pageTree.children} className="md:hidden" />
-      <div className="mx-auto min-h-screen max-w-screen-2xl sm:grid sm:grid-cols-[20px_1fr_20px] md:grid-cols-[30px_1fr_30px] lg:grid-cols-[50px_1fr_50px]">
+      <div className="mx-auto min-h-screen max-w-screen-2xl sm:grid sm:grid-cols-[20px_1fr_20px] md:grid-cols-[30px_1fr_30px]">
         <div className="diagonal-pattern hidden sm:block" />
         <div className="">
           <div className="min-h-[70vh]">{children}</div>

www/src/app/(home)/page.tsx

@@ -18,8 +18,8 @@ export default function HomePage() {
   return (
     <div>
       {/* Hero section */}
-      <div className="container">
-        <section className="max-w-3xl pb-20 pt-14 sm:pt-24 lg:pb-32">
+      <div className="container max-w-screen-2xl">
+        <section className="max-w-3xl pb-20 pt-10 sm:pt-14">
           <Button
             href="/themes"
             prefix={<LayoutTemplateIcon />}
@@ -28,15 +28,15 @@ export default function HomePage() {
           >
             Introducing themes
           </Button>
-          <h1 className="xs:text-3xl text-balance text-2xl tracking-tighter max-lg:font-medium sm:text-4xl md:text-5xl lg:text-6xl">
+          <h1 className="xs:text-3xl text-balance text-2xl tracking-tighter max-lg:font-medium md:text-4xl lg:text-5xl">
             Quickly build your component library with a{" "}
             <span className="font-bold italic">unique</span> look.
           </h1>
-          <p className="text-fg-muted text-balace mt-2 text-lg md:mt-4">
+          <p className="text-fg-muted text-balace mt-2 text-lg">
             Over 40 components available in multiple variants ready to match
             your brand identity.
           </p>
-          <div className="mt-4 flex flex-col gap-2 sm:mt-8 sm:flex-row sm:items-center sm:gap-4">
+          <div className="mt-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
             <Button
               href="/docs/getting-started/introduction"
               variant="primary"
@@ -57,7 +57,7 @@ export default function HomePage() {
         </section>
       </div>
       {/* Components overview */}
-      <section className="px-4 sm:px-8">
+      <section className="container max-w-screen-2xl">
         <ThemesOverview />
       </section>
       <section className="shadow-xs mt-10 border-y py-12 lg:py-8">

www/src/components/demos/button/loading.tsx

@@ -1,16 +1,31 @@
+"use client";
+
+import React from "react";
 import { Button } from "@/components/dynamic-core/button";
 
 export default function Demo() {
+  const [isPending, setPending] = React.useState(false);
   return (
-    <div className="flex w-full items-center justify-center gap-2">
-      <Button size="sm" isPending>
-        Button
-      </Button>
-      <Button size="md" isPending>
-        Button
-      </Button>
-      <Button size="lg" isPending>
-        Button
+    <div className="flex flex-col items-center gap-4">
+      <div className="flex w-full items-center justify-center gap-2">
+        <Button size="sm" isPending>
+          Button
+        </Button>
+        <Button size="md" isPending>
+          Button
+        </Button>
+        <Button size="lg" isPending>
+          Button
+        </Button>
+      </div>
+      <Button
+        isPending={isPending}
+        onPress={() => {
+          setPending(true);
+          setTimeout(() => setPending(false), 2000);
+        }}
+      >
+        Click me
       </Button>
     </div>
   );

www/src/components/header.tsx

@@ -8,6 +8,7 @@ import { Button } from "@/components/core/button";
 import { siteConfig } from "@/config";
 import { Kbd } from "./core/kbd";
 import { GitHubIcon, TwitterIcon } from "./icons";
+import { Logo } from "./logo";
 import { SearchCommand } from "./search-command";
 import { ThemeColorsSelector } from "./theme-colors-selector";
 import { ThemeSwitcher } from "./theme-switcher";
@@ -19,7 +20,7 @@ export function Header({ className }: { className?: string }) {
     >
       <div className="px-12.5 container relative flex h-14 max-w-screen-2xl items-center justify-between">
         <div className="flex items-center gap-6">
-          {/* <Logo /> */}
+          <Logo />
           <div className="flex items-center gap-3 text-sm">
             {[
               { label: "Docs", href: "/docs/getting-started/introduction" },

www/src/modules/themes/components/themes-overview.tsx

@@ -57,7 +57,7 @@ export const ThemesOverview = () => {
 
   return (
     <div className="flex flex-col items-center gap-10 md:gap-4">
-      <div className="container relative flex flex-col items-center gap-6">
+      <div className="container relative flex max-w-screen-2xl flex-col items-center gap-6">
         <div className="text-fg-muted relative flex items-center gap-2 py-2 pl-4 pr-2 font-mono text-xs">
           <motion.div
             layout
@@ -209,7 +209,7 @@ export const ThemesOverview = () => {
                       animate="show"
                       exit="hidden"
                     >
-                      <ComponentsOverview className="hidden xl:container sm:grid" />
+                      <ComponentsOverview className="hidden sm:grid" />
                       <MobileComponentsOverview className="sm:hidden" />
                     </motion.div>
                   </AnimatePresence>

www/src/registry/core/button_basic.tsx

@@ -15,7 +15,7 @@ import { focusRing } from "@/registry/lib/focus-styles";
 
 const buttonStyles = tv({
   extend: focusRing,
-  base: "disabled:bg-bg-disabled disabled:text-fg-disabled pending:cursor-default pending:bg-bg-disabled pending:text-fg-disabled pending:border pending:border-border-disabled inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium leading-normal transition-all disabled:cursor-default",
+  base: "disabled:bg-bg-disabled disabled:text-fg-disabled pending:cursor-default pending:bg-bg-disabled pending:text-fg-disabled pending:border pending:border-border-disabled pending:**:not-data-[slot=spinner]:not-in-data-[slot=spinner]:opacity-0 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium leading-normal transition-all disabled:cursor-default",
   variants: {
     variant: {
       default:
@@ -102,17 +102,14 @@ const Button = React.forwardRef(
           <>
             {isPending && (
               <Loader
+                data-slot="spinner"
                 aria-label="loading"
                 className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
                 size={16}
               />
             )}
             {prefix}
-            {typeof children === "string" ? (
-              <span className="truncate">{children}</span>
-            ) : (
-              children
-            )}
+            <span className="truncate">{children}</span>
             {suffix}
           </>
         ))}

www/src/styles/docs.css

@@ -4,7 +4,6 @@
   padding-inline: 1rem;
 
   @media (width >= --theme(--breakpoint-sm)) {
-    max-width: var(--container-7xl);
     padding-inline: 2rem;
   }
 }