Merge pull request #2401 from garden-co/feat/snippet-improvements

Feat/snippet improvements

Author: Sammii-HK

homepage/design-system/src/components/atoms/Icon.tsx

@@ -12,6 +12,7 @@ import {
   ChevronLeftIcon,
   ChevronRight,
   ChevronRightIcon,
+  ClipboardCheckIcon,
   ClipboardIcon,
   CodeIcon,
   Eye,
@@ -66,6 +67,7 @@ export const icons = {
   close: XIcon,
   code: CodeIcon,
   copy: ClipboardIcon,
+  copySuccess: ClipboardCheckIcon,
   cursor: MousePointer2Icon,
   darkTheme: MoonIcon,
   delete: TrashIcon,

homepage/design-system/src/components/molecules/CodeGroup.tsx

@@ -11,7 +11,7 @@ export function CopyButton({
   onCopy,
 }: {
   code: string;
-  size: "md" | "lg";
+  size: "sm" | "md" | "lg";
   className?: string;
   onCopy?: () => void;
 }) {
@@ -32,13 +32,13 @@ export function CopyButton({
       type="button"
       className={clsx(
         className,
-        "group/button absolute overflow-hidden rounded text-2xs font-medium md:opacity-0 backdrop-blur transition md:focus:opacity-100 group-hover:opacity-100",
+        "group/button absolute overflow-hidden rounded text-2xs font-medium md:opacity-0 backdrop-blur transition md:focus:opacity-100 group-hover:opacity-100 items-center align-middle p-0",
         copied
-          ? "bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20"
+          ? "bg-blue-400/10 ring-1 ring-inset ring-blue-400/20"
           : "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5",
-        size == "md"
+        size === "md"
           ? "right-[8.5px] top-[8.5px] py-[2px] pl-1 pr-2"
-          : "right-2 top-2 py-1 pl-2 pr-3",
+          : "right-2 top-2 py-1 pl-2 pr-2",
       )}
       onClick={() => {
         window.navigator.clipboard.writeText(code).then(() => {
@@ -60,18 +60,22 @@ export function CopyButton({
           className={clsx(
             size === "md" ? "size-3" : "size-4",
             "stroke-stone-500 transition-colors group-hover/button:stroke-stone-600 dark:group-hover/button:stroke-stone-400",
+            copied && "stroke-primary",
           )}
         />
-        Copy
+        {size !== "sm" && "Copy"}
       </span>
       <span
         aria-hidden={!copied}
         className={clsx(
-          "pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-600 transition duration-300 dark:text-emerald-400",
+          "pointer-events-none absolute inset-0 flex items-center justify-center text-primary transition duration-300",
           !copied && "translate-y-1.5 opacity-0",
         )}
       >
-        Copied!
+        {size === "sm" && (
+          <Icon name="copySuccess" size="xs" className="stroke-primary" />
+        )}
+        {size !== "sm" && "Copied!"}
       </span>
     </button>
   );

homepage/design-system/src/components/organisms/Dropdown.tsx

@@ -60,7 +60,7 @@ export function DropdownItem({
   let classes = clsx(
     className,
     // Base styles
-    "group rounded-md space-x-2  focus:outline-none px-2.5 py-1.5",
+    "group rounded-md space-x-2 focus:outline-none px-2.5 py-1.5",
     // Text styles
     "text-left text-sm/6 dark:text-white forced-colors:text-[CanvasText]",
     // Focus

homepage/design-system/src/utils/tailwindClassesMap.ts

@@ -22,7 +22,7 @@ export type Style =
 export const sizeClasses = {
   sm: "text-sm py-1 px-2",
   md: "py-1.5 px-3",
-  lg: "md:text-lg  py-2 px-3 md:px-8 md:py-3",
+  lg: "py-2 px-5 md:px-6 md:py-2.5",
 };
 
 export const styleToBorderMap = {

homepage/homepage/app/(others)/(home)/page.tsx

@@ -4,6 +4,7 @@ import { ComingSoonSection } from "@/components/home/ComingSoonSection";
 import { EarlyAdopterSection } from "@/components/home/EarlyAdopterSection";
 import { EncryptionSection } from "@/components/home/EncryptionSection";
 import { FeaturesSection } from "@/components/home/FeaturesSection";
+import { GetStartedSnippetSelect } from "@/components/home/GetStartedSnippetSelect";
 import { HeroSection } from "@/components/home/HeroSection";
 import { HowJazzWorksSection } from "@/components/home/HowJazzWorksSection";
 import { LocalFirstFeaturesSection } from "@/components/home/LocalFirstFeaturesSection";
@@ -16,7 +17,8 @@ export default function Home() {
     <>
       <HeroSection />
 
-      <div className="container flex flex-col gap-12 mt-12 lg:gap-20 lg:mt-20">
+      <div className="container flex flex-col gap-12 lg:gap-20">
+        <GetStartedSnippetSelect />
         <SupportedEnvironmentsSection />
         <HowJazzWorksSection />
 

homepage/homepage/components/SideNavItem.tsx

@@ -17,7 +17,7 @@ export function SideNavItem({
 }) {
   const classes = clsx(
     className,
-    "py-1 px-2 -mx-2 group rounded-md flex items-center  transition-colors",
+    "py-1 px-2 group rounded-md flex items-center transition-colors",
   );
   const path = usePathname();
 
@@ -28,7 +28,7 @@ export function SideNavItem({
         className={clsx(
           classes,
           path === href
-            ? "text-stone-900 font-medium  bg-stone-100 dark:text-white dark:bg-stone-900"
+            ? "text-stone-900 font-medium  bg-stone-200/50 dark:text-white dark:bg-stone-800/50"
             : "hover:text-stone-900 dark:hover:text-stone-200",
         )}
       >

homepage/homepage/components/docs/FrameworkSelect.tsx

@@ -10,10 +10,21 @@ import {
   DropdownItem,
   DropdownMenu,
 } from "@garden-co/design-system/src/components/organisms/Dropdown";
+import clsx from "clsx";
 import { usePathname, useRouter } from "next/navigation";
 import { useState } from "react";
 
-export function FrameworkSelect() {
+export function FrameworkSelect({
+  onSelect,
+  size = "md",
+  routerPush = true,
+  className,
+}: {
+  onSelect?: (framework: Framework) => void;
+  size?: "sm" | "md";
+  routerPush?: boolean;
+  className?: string;
+}) {
   const router = useRouter();
   const defaultFramework = useFramework();
   const [selectedFramework, setSelectedFramework] =
@@ -23,26 +34,26 @@ export function FrameworkSelect() {
 
   const selectFramework = (newFramework: Framework) => {
     setSelectedFramework(newFramework);
-    router.push(path.replace(defaultFramework, newFramework));
+    onSelect && onSelect(newFramework);
+    routerPush && router.push(path.replace(defaultFramework, newFramework));
   };
 
   return (
     <Dropdown>
       <DropdownButton
-        className="w-full justify-between"
+        className={clsx("w-full justify-between overflow-hidden text-nowrap", size === "sm" && "text-sm", className)}
         as={Button}
         variant="outline"
         intent="default"
       >
-        {frameworkNames[selectedFramework].label}
+        <span className="text-nowrap max-w-full overflow-hidden text-ellipsis">{frameworkNames[selectedFramework].label}</span>
         <Icon name="chevronDown" size="sm" />
       </DropdownButton>
       <DropdownMenu className="w-[--button-width] z-50" anchor="bottom start">
         {Object.entries(frameworkNames)
-          .filter(([_, framework]) => !framework.hidden)
           .map(([key, framework]) => (
             <DropdownItem
-              className="items-baseline"
+            className={clsx("items-baseline", size === "sm" && "text-xs text-nowrap", selectedFramework === key && "text-primary dark:text-primary")}
               key={key}
               onClick={() => selectFramework(key as Framework)}
           >

homepage/homepage/components/home/GetStartedSnippetSelect.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { Framework } from "@/content/framework";
+import { useFramework } from "@/lib/use-framework";
+import NpxCreateJazzApp from "@/components/home/NpxCreateJazzApp.mdx";
+import { CopyButton } from "@garden-co/design-system/src/components/molecules/CodeGroup";
+import { useState } from "react";
+import { Button } from "@garden-co/design-system/src/components/atoms/Button";
+import Link from "next/link";
+import { FrameworkSelect } from "../docs/FrameworkSelect";
+import clsx from "clsx";
+import { track } from "@vercel/analytics";
+import { GappedGrid } from "@garden-co/design-system/src/components/molecules/GappedGrid";
+
+export function GetStartedSnippetSelect() {
+  const defaultFramework = useFramework();
+  const [selectedFramework, setSelectedFramework] =
+    useState<Framework>(defaultFramework);
+
+  return (
+    <GappedGrid>
+      <div className="relative w-full col-span-2 lg:col-span-3 border-2 border-primary rounded-lg overflow-hidden">
+        <CopyButton
+          code="npx create-jazz-app@latest"
+          size="sm"
+          className={clsx("mt-0.5 mr-0.5 z-100 md:opacity-100 hidden md:block")}
+          onCopy={() => track("create-jazz-app command copied from hero")}
+        />
+        <NpxCreateJazzApp />
+      </div>
+      <div className="col-span-2 lg:col-span-3 flex flex-row gap-2">
+        <div className="h-full items-center w-[175px]">
+          <FrameworkSelect onSelect={setSelectedFramework} size="md" routerPush={false} className="h-full md:px-4" />
+        </div>
+        <div className="flex h-full items-center">
+          <Button intent="primary" size="lg" className="w-full">
+            <Link className="my-[0.11rem]" href={`/docs/${selectedFramework}`}>Get started</Link>
+          </Button>
+        </div>
+      </div>
+    </GappedGrid>
+  );
+}

homepage/homepage/components/home/HeroSection.tsx

@@ -1,18 +1,16 @@
 "use client";
 
-import CreateJazzApp from "@/components/home/CreateJazzApp.mdx";
 import { marketingCopy } from "@/content/marketingCopy";
 import { H1 } from "@garden-co/design-system/src/components/atoms/Headings";
 import {
   Icon,
   type IconName,
 } from "@garden-co/design-system/src/components/atoms/Icon";
 import { Kicker } from "@garden-co/design-system/src/components/atoms/Kicker";
-import { CopyButton } from "@garden-co/design-system/src/components/molecules/CodeGroup";
 import { Prose } from "@garden-co/design-system/src/components/molecules/Prose";
-import { SectionHeader } from "@garden-co/design-system/src/components/molecules/SectionHeader";
-import { track } from "@vercel/analytics";
 import Link from "next/link";
+import { GetStartedSnippetSelect } from "./GetStartedSnippetSelect";
+
 
 const features: Array<{
   title: string;
@@ -54,8 +52,8 @@ const features: Array<{
 
 export function HeroSection() {
   return (
-    <div className="container grid items-center gap-x-8 gap-y-12 my-12 md:my-16 lg:my-24 lg:gap-x-10 lg:grid-cols-3">
-      <div className="flex flex-col justify-center gap-5 lg:col-span-2 lg:gap-8">
+    <div className="container grid items-center gap-x-8 gap-y-12 my-12 md:my-16 lg:my-24 lg:gap-x-10 lg:grid-cols-12">
+      <div className="flex flex-col justify-center gap-5 lg:col-span-11 lg:gap-8">
         <Kicker>Toolkit for backendless apps</Kicker>
         <H1>
           <span className="inline-block text-highlight">
@@ -94,31 +92,6 @@ export function HeroSection() {
           ))}
         </div>
       </div>
-
-      <div className="h-full group grid md:grid-cols-2 items-center lg:grid-cols-1 lg:pt-36">
-        <SectionHeader
-          className="md:col-span-2 lg:sr-only"
-          title="Get a Jazz app running in minutes."
-        />
-        <div className="overflow-hidden sm:rounded-xl sm:border h-full sm:px-8 sm:pt-6 bg-stone-50 dark:bg-stone-950">
-          <div className="rounded-lg bg-white dark:bg-stone-925 sm:ring-4 ring-stone-400/20 sm:shadow-xl sm:shadow-blue/20 border relative sm:top-2 h-full w-full">
-            <div className="py-4 flex items-center gap-2.5 px-6 border-b">
-              <span className="rounded-full size-3 bg-stone-200 dark:bg-stone-900" />
-              <span className="rounded-full size-3 bg-stone-200 dark:bg-stone-900" />
-              <span className="rounded-full size-3 bg-stone-200 dark:bg-stone-900" />
-              <CopyButton
-                code="npx create-jazz-app@latest"
-                size="md"
-                className="mt-0.5 mr-0.5"
-                onCopy={() => track("create-jazz-app command copied from hero")}
-              />
-            </div>
-            <div className="p-3">
-              <CreateJazzApp />
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   );
 }

homepage/homepage/components/home/NpxCreateJazzApp.mdx

@@ -0,0 +1,3 @@
+```sh
+npx create-jazz-app@latest
+```