feat(): More docs components.

package.json

@@ -123,7 +123,7 @@
     "sonner": "^1.3.1",
     "tailwind-merge": "^2.1.0",
     "vaul": "^0.8.0",
-    "zod": "^3.22.4"
+    "zod": "^3.23.8"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^3.9.0",

src/custom/docs/components/header/CodeCopy.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+
+import {Button} from 'src'
+import { Check, Copy } from "lucide-react"
+export const CodeCopy = (props: {textToCopy: string}) => {
+
+    const [copied, setHasCopied] = React.useState(false)
+
+    return <div className="dark:text-foreground text-background w-full flex  items-center justify-center self-start whitespace-nowrap rounded bg-gradient-to-r from-zinc-600 to-slate-600  py-0.5 pl-4 text-center text-sm font-semibold  dark:from-zinc-600 dark:to-slate-600">
+        <code className="font-mono">{props.textToCopy}</code>
+
+        <Button
+        variant="ghost"
+        size="icon"
+        className={`${copied ? ' hover:bg-transparent' : 'hover:bg-background/50 hover:text-foreground/75'} ml-1`}
+        onClick={() => {
+          window.navigator.clipboard.writeText(props.textToCopy)
+          setHasCopied(true)
+          setTimeout(() => {
+            setHasCopied(false)
+          }, 2500)
+        }}
+      >
+        {copied ? (
+          <Check className="text-background h-5 w-5"></Check>
+        ) : (
+          <Copy className="aspect-square h-4 w-4"></Copy>
+        )}
+      </Button>
+      </div>
+}

src/custom/docs/components/header/index.tsx

@@ -0,0 +1,73 @@
+
+import { cn } from 'src'
+import React from 'react'
+import { CodeCopy } from './CodeCopy'
+
+const Title = React.forwardRef<
+HTMLHeadingElement,
+React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+return (
+  <h1
+    className={cn('text-6xl font-semibold tracking-tighter', className)}
+    ref={ref}
+  >
+    {props.children}
+  </h1>
+)
+})
+Title.displayName = 'Title'
+
+const Subtitle = React.forwardRef<
+HTMLHeadingElement,
+React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+return (
+  <h2
+    className={cn('text-muted-foreground mt-5 mb-4 text-2xl tracking-tighter', className)}
+    ref={ref}
+  >
+    {props.children}
+  </h2>
+)
+})
+Subtitle.displayName = 'Subtitle'
+
+const Left = React.forwardRef<
+HTMLDivElement,
+React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+  return <div className="mb-4 mt-0 md:mt-6 flex flex-col " ref={ref}>{props.children}</div>
+
+})
+Left.displayName = 'Left'
+
+const Right = React.forwardRef<
+HTMLDivElement,
+React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+
+  return <div className="mt-0 mr-10 hidden lg:flex md:justify-end" ref={ref}>{props.children}</div>
+
+})
+Right.displayName = 'Right'
+
+
+
+
+// mt-4 flex flex-col max-w-[32rem] gap-3
+
+const Wrapper  = React.forwardRef<
+HTMLDivElement,
+React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+  return  <div className="flex w-full my-4" ref={ref}>
+      <div className="relative mx-auto flex flex-grow flex-wrap flex-col py-4">{props.children}</div></div>
+
+})
+Wrapper.displayName = 'Wrapper'
+
+const LeftTitle = Title
+const LeftSubtitle = Subtitle;
+
+export {Wrapper, Right, Left, LeftTitle, LeftSubtitle, CodeCopy}

src/custom/docs/components/triplecard/Card.tsx

@@ -0,0 +1,71 @@
+import { LucideIcon } from 'lucide-react'
+import React from 'react'
+import { cn } from 'src'
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+  return (
+    <p
+      className={cn(
+        'mb-1 mt-4 text-[1.45rem] font-semibold tracking-tight',
+        className
+      )}
+      ref={ref}
+    >
+      {props.children}
+    </p>
+  )
+})
+CardTitle.displayName = 'CardTitle'
+
+const CardSubtitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+  return (
+    <p
+      className={cn('text-muted-foreground mb-6 mt-4 text-sm', className)}
+      ref={ref}
+    >
+      {props.children}
+    </p>
+  )
+})
+CardSubtitle.displayName = 'CardSubtitle'
+
+const Card = React.forwardRef<
+  HTMLParagraphElement,
+  React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+  return (
+    <div
+      className={cn(
+        ' border-border flex w-full flex-col justify-between rounded-xl overflow-hidden border p-7 pb-9 dark:bg-muted/25 bg-background',
+        className
+      )}
+      ref={ref}
+    >
+      <div> {props.children}</div>
+    </div>
+  )
+})
+Card.displayName = 'Card'
+
+const IconBar = React.forwardRef<
+  HTMLParagraphElement,
+  React.InputHTMLAttributes<HTMLParagraphElement>
+>(({ className, type, ...props }, ref) => {
+  return (
+    <div
+      className={cn('mb-4 flex items-center justify-between', className)}
+      ref={ref}
+    >
+      {props.children}
+    </div>
+  )
+})
+IconBar.displayName = 'IconBar'
+
+export { Card, CardTitle, CardSubtitle }

src/custom/docs/components/triplecard/index.tsx

@@ -0,0 +1,87 @@
+import { Card,  CardTitle, CardSubtitle  } from './Card'
+import NextImage from 'next/image'
+import { z } from 'zod'
+import { ComponentProps } from 'react'
+
+const linkSchema = z.object({
+  title: z.string(),
+  description: z.string(),
+  link: z.string(),
+})
+
+const cardSchema = z.array(
+  z.object({
+    title: z.string(),
+    subtitle: z.string(),
+    icon: z.string(),
+    image_link: z.string(),
+    image_description: z.string(),
+    links: z.array(linkSchema),
+  }))
+
+
+  const regularLink = (props: ComponentProps<'a'>) => <a {...props}></a>
+
+export const TripleCard = (props: {cards: z.infer<typeof cardSchema>, imageComponent: typeof NextImage | typeof regularLink  }) => {
+
+  return (
+    <div className="shadow-lg rounded-xl grid grid-cols-1 items-stretch md:grid-cols-3 ">
+      {props.cards.map((item, idx, arr) => {
+        return (
+          <Card
+            key={item.title}
+            className={(() => {
+              if (idx === 0) {
+                return 'md:border-b-1 rounded-r-none border-b-none rounded-b md:rounded-bl-xl  md:border-r-0'
+              }
+              if (idx === arr.length - 1) {
+                return 'md:border-b-1 rounded-l-none rounded-t-none border-t-0  md:rounded-tr-xl  md:border-t  md:border-l-0'
+              }
+              return 'rounded-none border-t-0 md:border-t'
+            })()}
+          >
+
+            <CardTitle className="mt-1 -mb-0.5 text-[1.4rem]">
+              {item.title}
+            </CardTitle>
+            <CardSubtitle>{item.subtitle}</CardSubtitle>
+            {item.image_link ? (
+              <div className="h-[19rem] md:h-[14rem] -my-4 flex justify-center dark:invert dark:brightness-[0.91] dark:grayscale">
+                <props.imageComponent
+                  alt={item.image_description}
+                  height={300}
+                  src={item.image_link}
+                  width={200}
+                  style={{ objectFit: 'contain' }}
+                  priority
+                /> 
+              </div>
+            ) : (
+              null
+            )}
+            <div className="my-4"></div>
+            <ul className="mt-5 flex flex-col gap-4">
+              {item.links.map((link) => {
+                return (
+                  <li key={link.title}>
+
+                    <a
+                      className="font-semibold tracking-tight text-blue-600 dark:text-blue-300"
+                      href={link.link}
+                    >
+                      {link.title}
+                    </a>
+                    <div className="my-2"></div>
+                    <div className="text-muted-foreground text-xs leading-4">
+                      {link.description}
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          </Card>
+        )
+      })}
+    </div>
+  )
+}

src/custom/docs/index.ts

@@ -1,2 +1,4 @@
 export {Footer} from './components/footer'
 export { NavBar } from './components/navmenu/index'
+export { TripleCard } from './components/triplecard'
+export * from './components/header'