add standard ruleset docs

src/app/_components/chance.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils'
+
+export function Chance({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-medium text-[#35bd86]', className)} {...props} />
+  )
+}

src/app/_components/chips.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+export function Chips({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-medium text-[#0093ff]', className)} {...props} />
+  )
+}

src/app/_components/hands.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+export function Hands({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-medium text-[#ff8f00]', className)} {...props} />
+  )
+}

src/app/_components/joker-card.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import type { ElementType } from 'react'
+import slugify from 'slugify'
+
+type JokerCardProps = {
+  name: string
+  img: string
+  h?: number
+}
+
+export function JokerCard({ name, img, h = 3 }: JokerCardProps) {
+  const Heading = `h${h}` as ElementType
+  return (
+    <div
+      className={'flex scroll-mt-36 flex-col items-center gap-2'}
+      id={`${slugify(name, { lower: true, strict: true })}-toc`}
+    >
+      <img src={img} alt={name} className={'!m-0 max-w-24 rounded-md'} />
+      <div className={'flex flex-col gap-1'}>
+        <Heading className={'!m-0 text-nowrap font-medium text-sm'}>
+          {name}
+        </Heading>
+      </div>
+    </div>
+  )
+}

src/app/_components/money.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils'
+
+export function Money({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-medium text-[#f5b244]', className)} {...props} />
+  )
+}

src/app/_components/mult.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils'
+
+export function Mult({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-medium text-[#ff4c40]', className)} {...props} />
+  )
+}

src/app/_components/spectral.tsx

@@ -0,0 +1,10 @@
+import { cn } from '@/lib/utils'
+
+export function Spectral({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-medium text-[#2e76fd]', className)} {...props} />
+  )
+}

src/app/_components/xmult.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+export function Xmult({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        'rounded-md bg-[#ff4c40] px-1 font-medium text-white',
+        className
+      )}
+      {...props}
+    />
+  )
+}

src/app/docs/[[...slug]]/page.tsx

@@ -1,3 +1,11 @@
+import { Chance } from '@/app/_components/chance'
+import { Chips } from '@/app/_components/chips'
+import { Hands } from '@/app/_components/hands'
+import { JokerCard } from '@/app/_components/joker-card'
+import { Money } from '@/app/_components/money'
+import { Mult } from '@/app/_components/mult'
+import { Spectral } from '@/app/_components/spectral'
+import { Xmult } from '@/app/_components/xmult'
 import { Button } from '@/components/ui/button'
 import { ImageZoom } from 'fumadocs-ui/components/image-zoom'
 import defaultMdxComponents from 'fumadocs-ui/mdx'
@@ -21,7 +29,13 @@ export default async function Page(props: {
   const MDX = page.data.body
 
   return (
-    <DocsPage toc={page.data.toc} full={page.data.full}>
+    <DocsPage
+      toc={page.data.toc}
+      tableOfContent={{
+        style: 'clerk',
+      }}
+      full={page.data.full}
+    >
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>
@@ -30,6 +44,14 @@ export default async function Page(props: {
             ...defaultMdxComponents,
             img: (props) => <ImageZoom {...(props as any)} />,
             Button: (props) => <Button {...(props as any)} />,
+            JokerCard: (props) => <JokerCard {...(props as any)} />,
+            Chips: (props) => <Chips {...(props as any)} />,
+            Hands: (props) => <Hands {...(props as any)} />,
+            Chance: (props) => <Chance {...(props as any)} />,
+            Money: (props) => <Money {...(props as any)} />,
+            Xmult: (props) => <Xmult {...(props as any)} />,
+            Spectral: (props) => <Spectral {...(props as any)} />,
+            Mult: (props) => <Mult {...(props as any)} />,
           }}
         />
       </DocsBody>