add rebrand landing page (#211)

packages/ui/src/code-block.tsx

@@ -0,0 +1,36 @@
+import { BundledLanguage, codeToHast } from "shiki";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+
+interface Props {
+  children: string;
+  lang: BundledLanguage;
+  className?: string;
+}
+
+export async function CodeBlock(props: Props) {
+  const out = await codeToHast(props.children, {
+    lang: props.lang,
+    themes: {
+      dark: "catppuccin-mocha",
+      light: "catppuccin-latte",
+    },
+  });
+
+  return toJsxRuntime(out, {
+    Fragment,
+    jsx,
+    jsxs,
+    components: {
+      // your custom `pre` element
+      pre: (nodeProps) => (
+        <pre
+          {...nodeProps}
+          className={cn(nodeProps.className, props.className)}
+        />
+      ),
+    },
+  }) as React.JSX.Element;
+}

packages/ui/src/code.tsx

@@ -1,101 +0,0 @@
-import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
-import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
-import ruby from "react-syntax-highlighter/dist/esm/languages/hljs/ruby";
-import php from "react-syntax-highlighter/dist/esm/languages/hljs/php";
-import python from "react-syntax-highlighter/dist/esm/languages/hljs/python";
-// import { nightOwl } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import codeTheme from "../code-theme";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
-import { Button } from "./button";
-import { ClipboardCopy, Check } from "lucide-react";
-import { useState } from "react";
-import { cn } from "../lib/utils";
-
-export type Language = "js" | "ruby" | "php" | "python" | "curl";
-
-export type CodeBlock = {
-  language: Language;
-  title?: string;
-  code: string;
-};
-
-type CodeProps = {
-  codeBlocks: CodeBlock[];
-  codeClassName?: string;
-};
-
-SyntaxHighlighter.registerLanguage("js", js);
-SyntaxHighlighter.registerLanguage("ruby", ruby);
-SyntaxHighlighter.registerLanguage("php", php);
-SyntaxHighlighter.registerLanguage("python", python);
-
-export const Code: React.FC<CodeProps> = ({ codeBlocks, codeClassName }) => {
-  const [selectedTab, setSelectedTab] = useState(
-    codeBlocks[0]?.language ?? "js"
-  );
-  const [isCopied, setIsCopied] = useState(false);
-
-  const copyToClipboard = async (code: string) => {
-    try {
-      await navigator.clipboard.writeText(code);
-      setIsCopied(true);
-      setTimeout(() => setIsCopied(false), 2000); // Reset the icon back to clipboard after 2 seconds
-    } catch (err) {
-      alert("Failed to copy code");
-    }
-  };
-
-  return (
-    <div className="rounded-xl bg-background border shadow-[#1e293b] shadow-lg">
-      <Tabs
-        defaultValue={codeBlocks[0]?.language}
-        onValueChange={(val) => setSelectedTab(val as Language)}
-      >
-        <div className="flex justify-between items-center border-b py-1 px-2">
-          <TabsList className="w-full rounded-none justify-start bg-transparent h-12">
-            <div className="">
-              {codeBlocks.map((block) => (
-                <TabsTrigger
-                  key={block.language}
-                  value={block.language}
-                  className="data-[state=active]:bg-accent py-0.5 px-4 "
-                >
-                  {block.title || block.language}
-                </TabsTrigger>
-              ))}
-            </div>
-          </TabsList>
-          <Button
-            size="icon"
-            variant="icon"
-            onClick={() =>
-              copyToClipboard(
-                codeBlocks.find((block) => block.language === selectedTab)
-                  ?.code || ""
-              )
-            }
-          >
-            {isCopied ? (
-              <Check className="h-4 w-4" />
-            ) : (
-              <ClipboardCopy className="h-4 w-4" />
-            )}
-          </Button>
-        </div>
-        {codeBlocks.map((block) => (
-          <TabsContent
-            key={block.language}
-            value={block.language}
-            className="mt-0"
-          >
-            <div className={cn("overflow-auto rounded-b-xl", codeClassName)}>
-              <SyntaxHighlighter language={block.language} style={codeTheme}>
-                {block.code}
-              </SyntaxHighlighter>
-            </div>
-          </TabsContent>
-        ))}
-      </Tabs>
-    </div>
-  );
-};

packages/ui/src/typography.tsx

@@ -14,7 +14,7 @@ export const H1 = React.forwardRef<HTMLHeadingElement, TypographyProps>(
       ref={ref}
       className={cn(
         // font-mono, larger and a bit bolder
-        " font-mono text-xl font-medium",
+        " font-mono text-xl font-medium text-primary",
         className
       )}
       {...props}