Frame

export const metadata = {
  title: 'Featured Card Frame',
  description: 'A card frame with a curved top cutout for featured images or hero content.'
};
 
import { Frame } from 'ui-lab-components/frame';
 
// The SVG path definition for the curve
const LIQUID_WIDTH = 180;
const LIQUID_PATH = "M 0 0 C 36 0 36 44 90 44 C 144 44 144 0 180 0";
 
const DefaultFrame = () => {
  return (
    <div className="flex items-center justify-center min-h-[400px] bg-background-950">
      <div className="relative w-full max-w-sm group">
 
        {/* 1. The Frame Component with the Path Prop */}
        <Frame
          path={LIQUID_PATH}
          pathWidth={LIQUID_WIDTH}
          className="text-background-700  bg-background-700/20 shadow-2xl backdrop-blur-sm"
          style={{ var(--background-700)" }}
        >
          {/* Minimal Content */}
          <div className="w-100 h-50 flex flex-col h-full p-17 text-center">
          </div>
        </Frame>
      </div>
    </div>
  );
};
 
export default DefaultFrame;
 

export const metadata = {
  title: 'Tooltip Frame',
  description: 'A frame with a pointer tail on the bottom, typical for tooltips or popovers.'
};
 
import React from 'react';
import { Frame } from 'ui-lab-components/frame';
 
const TAIL_WIDTH = 48;
const TAIL_PATH = "M 0 0 C 8 0 20 -16 24 -16 C 28 -16 36 0 48 0";
 
const Example2 = () => {
  return (
    <div className="flex flex-col gap-12 p-12 items-center justify-center min-h-[400px] bg-background-950">
      <Frame
        side="bottom"
        shapeMode="extend"
        path={TAIL_PATH}
        pathWidth={TAIL_WIDTH}
        className="max-w-sm border-background-700 p-6"
        style={{ "--frame-fill": "var(--color-background-900)" } as React.CSSProperties}
      >
        <div className="text-center">
          <h3 className="font-semibold text-lg mb-2 text-foreground-50">Did you know?</h3>
          <p className="text-foreground-400 text-sm leading-relaxed">
            You can customize the frame orientation using the <code className="bg-background-800 px-1 rounded">side</code> prop.
            This frame uses <code className="text-accent-500">side="bottom"</code> to create a tooltip tail.
          </p>
        </div>
      </Frame>
    </div>
  );
};
 
export default Example2;
 

export const metadata = {
  title: 'Sidebar Tab Frame',
  description: 'A frame with a tab extending from the side, perfect for active navigation states.'
};
 
import React from 'react';
import { Frame } from 'ui-lab-components/frame';
 
const TAB_WIDTH = 120;
const TAB_PATH = "M 0 0 C 20 0 20 -24 40 -24 L 80 -24 C 100 -24 100 0 120 0";
 
const Example3 = () => {
  return (
    <div className="flex flex-row gap-0 p-12 items-center justify-center bg-background-950 min-h-[400px]">
      {/* Mock Sidebar */}
      <div className="flex flex-col items-end justify-center space-y-8 pr-6 border-background-800/50 h-64">
        <div className="text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors">Dashboard</div>
        <div className="text-accent-500 font-bold cursor-default">Settings</div>
        <div className="text-foreground-400 font-medium cursor-pointer hover:text-foreground-400 transition-colors">Profile</div>
      </div>
 
      {/* Frame content - visually connecting to "Settings" */}
      <div className="-ml-[1.5px]"> {/* Overlap border slightly to merge visual connection */}
        <Frame
          side="left"
          shapeMode="extend"
          path={TAB_PATH}
          pathWidth={TAB_WIDTH}
          className="w-80 h-64 p-6"
          style={{
            "--frame-fill": "var(--color-background-900)",
            "--frame-radius": "16px",
            var(--background-700)",
          } as React.CSSProperties}
        >
          <div className="h-full flex flex-col justify-center">
            <h2 className="text-2xl font-bold text-foreground-50 mb-4">Settings</h2>
            <div className="space-y-3">
              <div className="h-2 w-2/3 bg-background-800 rounded"></div>
              <div className="h-2 w-1/2 bg-background-800 rounded"></div>
              <div className="h-2 w-3/4 bg-background-800 rounded"></div>
            </div>
          </div>
        </Frame>
      </div>
    </div>
  );
};
 
export default Example3;