mirror of
https://github.com/johndoe6345789/snippet-pastebin.git
synced 2026-04-24 13:34:55 +00:00
This commit finalizes the migration to Material Design 3 by: - Removing all Radix UI dependencies and imports: * Migrated Avatar component to use native HTML with custom fallback handling * Replaced Collapsible with custom React hooks for expand/collapse state * Implemented AlertDialog using React Context with native divs * Built Sheet component with Portal-like behavior and native HTML * Converted Toggle and ToggleGroup to use React state management * Updated SidebarMenuButton to remove Radix Slot dependency - Removed deprecated SCSS module files (7 files): * button.module.scss, accordion.module.scss, checkbox.module.scss * radio-group.module.scss, select.module.scss, switch.module.scss * split-screen-editor.module.scss - Replaced Tailwind utility classes with inline styles and M3 classes: * Updated SplitScreenEditor to use M3 CSS variables and flexbox/grid * Migrated sidebar components to use M3 button and spacing classes * Removed Radix color imports from theme.scss - All components now use M3 design tokens via CSS custom properties - Maintained API compatibility with existing component usage patterns Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
29 lines
450 B
TypeScript
29 lines
450 B
TypeScript
import { ComponentProps } from "react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface AspectRatioProps extends ComponentProps<"div"> {
|
|
ratio?: number
|
|
}
|
|
|
|
function AspectRatio({
|
|
ratio = 16 / 9,
|
|
style,
|
|
children,
|
|
...props
|
|
}: AspectRatioProps) {
|
|
return (
|
|
<div
|
|
data-slot="aspect-ratio"
|
|
style={{
|
|
...style,
|
|
aspectRatio: ratio,
|
|
}}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { AspectRatio }
|