feat: added sections

example/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@buen/type": "npm:@jsr/buen__type@^1.0.10",
+    "@tailwindcss/container-queries": "^0.1.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.2.10",
     "next": "14.2.3",

example/src/app/page.tsx

@@ -1,14 +1,18 @@
 import { MainLayout } from "@/components/MainLayout/MainLayout";
 import { SliceFeatures } from "@/components/SliceFeatures";
 import { SliceHero } from "@/components/SliceHero";
+import { SliceInstallation } from "@/components/SliceInstallation";
 import { SliceTypeScale } from "@/components/SliceTypeScale";
+import { SliceUsage } from "@/components/SliceUsage";
 
 export default function Home() {
   return (
     <MainLayout>
       <SliceHero />
       <SliceTypeScale />
       <SliceFeatures />
+      <SliceInstallation />
+      <SliceUsage />
     </MainLayout>
   );
 }

example/src/components/PanelCode/PanelCode.tsx

@@ -1,34 +1,75 @@
 "use client";
 
 import clsx from "clsx";
-import { useState } from "react";
-import { panelContent } from "./PanelCode.content";
+import { useEffect, useState } from "react";
+import { PanelProps } from "./PanelCode.types";
 
-export function PanelCode() {
+type PanelCodeProps = {
+  className?: string;
+  panelContent?: PanelProps[];
+};
+
+export function PanelCode({ className, panelContent }: PanelCodeProps) {
   const [activeTab, setActiveTab] = useState(0);
-  const activeContent = panelContent[activeTab].content;
+  const [isHovering, setIsHovering] = useState(false);
+  const [isCopied, setIsCopied] = useState(false);
+
+  const activeContent = panelContent ? panelContent[activeTab].content : "";
+
+  useEffect(() => {
+    if (isCopied) {
+      const timeout = setTimeout(() => {
+        setIsCopied(false);
+        setIsHovering(false);
+      }, 2000);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [isCopied]);
+
+  const copyText = (string: string) => {
+    navigator.clipboard.writeText(string);
+    setIsCopied(true);
+  };
 
   return (
-    <div className="md:w-[33%] w-full mt-8 md:mt-0 border-2 border-[--color-primary] rounded-2xl md:h-full md:absolute right-0 top-0 z-0 overflow-hidden col-span-full">
-      <div className="flex flex-row items-start w-full overflow-scroll justify-start border-b-2 border-[--color-primary]">
-        {panelContent.map((tab, index) => (
-          <button
-            key={tab.title}
-            className={clsx(
-              "px-4 py-3 border-r-2 border-[--color-primary] h-full",
-            )}
-            onClick={() => setActiveTab(index)}
-          >
-            <p
+    <div
+      className={clsx(
+        "@container",
+        "w-full mt-8 md:mt-0 border-2 border-[--color-primary] rounded-2xl md:h-full right-0 top-0 z-0 overflow-hidden col-span-full",
+        className,
+      )}
+    >
+      <div className="relative flex flex-row items-start w-full overflow-scroll justify-start border-b-2 border-[--color-primary]">
+        {panelContent &&
+          panelContent.map((tab, index) => (
+            <button
+              key={tab.title}
               className={clsx(
-                "whitespace-pre",
-                activeTab === index ? "opacity-1" : "opacity-45",
+                "px-4 py-3 border-r-2 border-[--color-primary] h-full",
               )}
+              onClick={() => setActiveTab(index)}
             >
-              {tab.title}
-            </p>
+              <p
+                className={clsx(
+                  "whitespace-pre",
+                  activeTab === index ? "opacity-1" : "opacity-45",
+                )}
+              >
+                {tab.title}
+              </p>
+            </button>
+          ))}
+        <div className="hidden justify-end w-full h-full grow @[21rem]:flex">
+          <button
+            onClick={() => copyText(activeContent)}
+            onMouseEnter={() => !isCopied && setIsHovering(true)}
+            onMouseLeave={() => !isCopied && setIsHovering(false)}
+            className={clsx("px-4 py-3 h-full")}
+          >
+            copy
           </button>
-        ))}
+        </div>
       </div>
       <div className="px-4 py-3 h-full overflow-scroll">
         <pre>{activeContent}</pre>

example/src/components/PanelCode/PanelCode.types.ts

@@ -0,0 +1,4 @@
+export type PanelProps = {
+  title: string;
+  content: string;
+};

example/src/components/SliceInstallation/SliceInstallation.content.ts

@@ -0,0 +1,87 @@
+import { PanelProps } from "../PanelCode/PanelCode.types";
+
+export const sliceInstallTerminal: PanelProps[] = [
+  {
+    title: "terminal",
+    content: `
+  npx jsr add @buen/type
+  // or
+  deno add @buen/type
+  // or
+  yarn dlx jsr add @buen/type
+  // or
+  pnpm dlx jsr add @buen/type
+    `,
+  },
+];
+
+export const sliceInstallConfig: PanelProps[] = [
+  {
+    title: "tailwind.config.ts",
+    content: `
+  import { buenTypeTailwind } from "@buen/type";
+
+  /** @type {import('tailwindcss').Config} */
+  module.exports = {
+    //  ...
+    plugins: [
+      buenTypeTailwind
+    ]
+  };
+    `,
+  },
+];
+
+export const sliceInstallCustom: PanelProps[] = [
+  {
+    title: "type-config.ts",
+    content: `
+  const customHeadlines = {
+    'display-xl': {
+      classAlias: 'primary-headline',
+      fontFamily: "'Inter', 'sans-serif'",
+      fontWeight: 'bold',
+      clamp: [4.5, 9],
+      letterSpacing: '-0.1em',
+      lineHeight: 1,
+      textTransform: 'uppercase',
+    },
+    // other headline styles
+  }
+
+  const customTexts = {
+    'body': {
+      classAlias: 'article-body',
+      fontFamily: "'Inter', 'sans-serif'",
+      fontWeight: 'normal',
+      fontSize: '1.1rem'
+      letterSpacing: '0em',
+      lineHeight: 1.5,
+      textTransform: 'none',
+    },
+    // other text styles
+  }
+    `,
+  },
+  {
+    title: "tailwind.config.js",
+    content: `
+  import { buenTypeTailwind } from "@buen/type";
+  import { customHeadlines, customTexts } from "./type-config";
+
+  function typePlugin({ addUtilities }) {
+    buenTypeTailwind({ addUtilities }, {
+      customHeadlines,
+      customTexts
+    });
+  };
+
+  module.exports = {
+    //  ...
+    plugins: [
+      typePlugin
+    ]
+  };
+    `,
+  },
+];

example/src/components/SliceInstallation/SliceInstallation.tsx

@@ -0,0 +1,39 @@
+import { PanelCode } from "../PanelCode";
+import { SliceWrapper } from "../SliceWrapper";
+import {
+  sliceInstallConfig,
+  sliceInstallCustom,
+  sliceInstallTerminal,
+} from "./SliceInstallation.content";
+
+export function SliceInstallation() {
+  return (
+    <SliceWrapper title="INSTALLATION" innerClassName="gap-y-12 py-4">
+      <div className="grid grid-cols-subgrid col-span-full">
+        <div className="col-span-2 xl:col-span-2 max-w-[20rem]">
+          <p>
+            Install the jsr package with your package manager of choice. Then
+            import the plugin in your Tailwind CSS configuration file.
+          </p>
+        </div>
+        <div className="xl:col-start-5 md:col-start-4 col-span-4 xl:col-span-3 md:col-span-4 grid grid-cols-subgrid gap-y-8">
+          <PanelCode panelContent={sliceInstallTerminal} />
+          <PanelCode panelContent={sliceInstallConfig} />
+        </div>
+      </div>
+      <div className="grid grid-cols-subgrid col-span-full">
+        <div className="col-span-2 xl:col-span-2 max-w-[20rem]">
+          <p>
+            Customize the plugin with your own type definitions for{" "}
+            <code>customHeadlines</code> and
+            <code>customTexts</code> styles. You can also create{" "}
+            <code>classAlias</code>es for custom class names.
+          </p>
+        </div>
+        <div className="xl:col-start-5 md:col-start-4 col-span-4 xl:col-span-3 md:col-span-4 grid grid-cols-subgrid gap-y-8">
+          <PanelCode panelContent={sliceInstallCustom} />
+        </div>
+      </div>
+    </SliceWrapper>
+  );
+}

example/src/components/SliceInstallation/index.ts

@@ -0,0 +1,3 @@
+import { SliceInstallation } from "./SliceInstallation";
+
+export { SliceInstallation };

example/src/components/PanelCode/PanelCode.content.ts → example/src/components/SliceTypeScale/SliceTypeScale.content.ts

@@ -1,5 +1,6 @@
-"use client";
-export const panelContent = [
+import { PanelProps } from "../PanelCode/PanelCode.types";
+
+export const slicePanelContent: PanelProps[] = [
   {
     title: "index.ts",
     content: `

example/src/components/SliceTypeScale/SliceTypeScale.tsx

@@ -2,6 +2,7 @@ import clsx from "clsx";
 import { IframeWrapper } from "../IframeWrapper";
 import { PanelCode } from "../PanelCode";
 import { SliceWrapper } from "../SliceWrapper";
+import { slicePanelContent } from "./SliceTypeScale.content";
 
 export function SliceTypeScale() {
   return (
@@ -14,7 +15,10 @@ export function SliceTypeScale() {
           "after:content-[''] after:absolute after:w-[10%] after:bg-gradient-to-r after:from-black after:to-transparent after:right-[-10%] after:top-0 after:h-full after:z-10 after:pointer-events-none",
         )}
       />
-      <PanelCode />
+      <PanelCode
+        panelContent={slicePanelContent}
+        className="md:w-[33%] md:absolute"
+      />
     </SliceWrapper>
   );
 }

example/src/components/SliceUsage/SliceUsage.content.ts

@@ -0,0 +1,15 @@
+import { PanelProps } from "../PanelCode/PanelCode.types";
+
+export const sliceUsageComponent: PanelProps[] = [
+  {
+    title: "SomeComponent.tsx",
+    content: `
+  export const SomeComponent = () => (
+    <div>
+      <h1 className="headline-display-xl">Hello World</h1>
+      <p className="text-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+  );
+    `,
+  },
+];

example/src/components/SliceUsage/SliceUsage.tsx

@@ -0,0 +1,18 @@
+import { PanelCode } from "../PanelCode";
+import { SliceWrapper } from "../SliceWrapper";
+import { sliceUsageComponent } from "./SliceUsage.content";
+
+export function SliceUsage() {
+  return (
+    <SliceWrapper title="USAGE" innerClassName="gap-y-6 py-4">
+      <div className="grid grid-cols-subgrid col-span-full">
+        <div className="col-span-2 xl:col-span-2 max-w-[20rem]">
+          <p>Use the custom classes in your components to style your text.</p>
+        </div>
+        <div className="xl:col-start-5 md:col-start-4 col-span-4 xl:col-span-3 md:col-span-4 grid grid-cols-subgrid gap-y-8">
+          <PanelCode panelContent={sliceUsageComponent} />
+        </div>
+      </div>
+    </SliceWrapper>
+  );
+}

example/src/components/SliceUsage/index.ts

@@ -0,0 +1,3 @@
+import { SliceUsage } from "./SliceUsage";
+
+export { SliceUsage };

example/tailwind.config.ts

@@ -1,3 +1,4 @@
+import containerQueries from "@tailwindcss/container-queries";
 import type { Config } from "tailwindcss";
 import { PluginAPI } from "tailwindcss/types/config";
 import { buenTypeTailwind } from "../src/index";
@@ -62,7 +63,7 @@ const config: Config = {
       },
     },
   },
-  plugins: [typePlugin],
+  plugins: [typePlugin, containerQueries],
 };
 
 export default config;