mirror of
https://github.com/jnsahaj/tweakcn.git
synced 2026-09-01 15:37:45 +08:00
Sameer Singh
a3c4c6c8e8
* chore: add @base-ui-components/react dependency and update pnpm-lock.yaml * feat: add custom hook useMediaQuery for responsive design * refactor: streamline button component code for improved readability * refactor: enhance ScrollArea component with viewport className prop and improve className organization * refactor: replace Dialog component with ResponsiveDialog for improved responsiveness and UI consistency * feat: introduce ResponsiveDialog component for enhanced mobile and desktop dialog handling * refactor: update Next.js configuration to use TypeScript type for NextConfig * refactor: replace Dialog with ResponsiveDialog in CardsChat component for improved UI consistency and responsiveness * refactor: replace Dialog with ResponsiveDialog in ShareDialog component for improved UI consistency and responsiveness * refactor: replace Dialog with ResponsiveDialog in FigmaExportDialog component for improved UI consistency and responsiveness. - Use `Scrollarea` for cleaner scrollbar and structure it a bit different, so scrollbar's doesn't overflow beyond dialog. * refactor: replace Dialog with ResponsiveDialog in ThemeSaveDialog component for improved UI consistency and responsiveness * refactor: replace Dialog with ResponsiveDialog in PodcastEmptyPlaceholder component for improved UI consistency and responsiveness * refactor: replace Dialog with ResponsiveDialog in ChatImagePreview component for improved UI consistency and responsiveness * feat: add Tabs component based on BaseUI with customizable TabsList, TabsTrigger, TabsContent, and TabsIndicator for improved UI navigation * refactor: replace Dialog with ResponsiveDialog in CssImportDialog component for improved UI consistency and responsiveness * refactor: replace Dialog with ResponsiveDialog in AuthDialog component for improved UI consistency and responsiveness * refactor: replace Dialog with ResponsiveDialog in MCPDialog component for improved UI consistency and responsiveness - Replace `Tabs` component with new Base UI based `Tabs` component * refactor: update Tabs and Select components in CodePanel for improved UI consistency - Replace old Tabs component with new Base UI based Tabs component - Add TabsIndicator for enhanced visual feedback - Adjust SelectContent z-index for better layering * refactor: replace Dialog with ResponsiveDialog in CodePanelDialog component for improved UI consistency and responsiveness - fix: accessibility issue cased by missing title and description for dialog * refactor: replace Dialog with ResponsiveDialog in ContrastChecker component for improved UI consistency and responsiveness - Disable `Issues` button, when there's no issue - Sticky Header for each section for better messaging for each section especially on mobile * refactor: adjust layout and spacing in FigmaExportDialog for improved visual consistency - Update margin and padding for better alignment of elements - Remove unnecessary line breaks to streamline the code * refactor: adjust layout and spacing in GetProDialog and AIChatDemo components for improved visual consistency - Update positioning of elements in GetProDialog for better alignment - Remove unnecessary inset from AIChatDemo for cleaner layout * refactor: enhance layout in CodePanelDialog for improved responsiveness - Adjust max-height for better display on smaller screens - Maintain overall visual consistency with other dialog components * refactor: enhance CodePanel layout with additional ScrollBar orientations - Add horizontal and vertical ScrollBars for improved navigation within code panels - Adjust padding in CodePanelDialog for better spacing and visual consistency * refactor: clean up TabsIndicator component by removing commented code - Remove unnecessary commented-out code for better readability - Streamline TabsIndicator implementation for improved clarity * refactor: update ResponsiveDialog components to use isDesktop for breakpoint detection - Replace isMobile with isDesktop in ResponsiveDialog components for improved clarity - Ensure consistent behavior across dialog and drawer implementations based on desktop view * refactor: enhance ResponsiveDialogContent with additional props for customization (v1.4) update - Introduce closeButtonClassName and dragHandleClassName props for better styling control - Update context initialization to allow null values for improved type safety - Refactor ResponsiveDialogContent to streamline rendering logic and improve readability * refactor: reorganize imports and clean up AuthDialog component for improved readability - Rearranged import statements for better structure - Removed unnecessary props from ResponsiveDialogContent for cleaner layout - Enhanced overall code clarity and maintainability * refactor: reorganize imports in MCPDialog for improved clarity and consistency - Rearranged import statements for better structure - Cleaned up component imports to enhance readability - Maintained overall code organization for future maintainability * refactor: reorganize imports and enhance layout in various dialog components for improved readability - Cleaned up and rearranged import statements for better structure - Updated ResponsiveDialogContent and ResponsiveDialogHeader for consistent padding and spacing - Enhanced overall layout and visual consistency across multiple dialog components * refactor: add iOS detection to adjust repositioning of inputs in ResponsiveDialog
68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import * as React from "react";
|
|
import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const Tabs = TabsPrimitive.Root;
|
|
|
|
const TabsList = React.forwardRef<
|
|
React.ComponentRef<typeof TabsPrimitive.List>,
|
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
|
>(({ className, ...props }, ref) => (
|
|
<TabsPrimitive.List
|
|
ref={ref}
|
|
className={cn(
|
|
"bg-muted text-muted-foreground relative inline-flex h-10 items-center justify-center rounded-md p-1",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
));
|
|
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
|
|
const TabsIndicator = React.forwardRef<
|
|
React.ComponentRef<typeof TabsPrimitive.Indicator>,
|
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Indicator>
|
|
>(({ className, ...props }, ref) => (
|
|
<TabsPrimitive.Indicator
|
|
ref={ref}
|
|
className={cn(
|
|
"bg-secondary absolute top-1/2 left-0 z-0 h-7 w-(--active-tab-width) translate-x-(--active-tab-left) -translate-y-1/2 rounded-full shadow-xs transition-all duration-200 ease-in-out",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
));
|
|
TabsIndicator.displayName = TabsPrimitive.Indicator.displayName;
|
|
|
|
const TabsTrigger = React.forwardRef<
|
|
React.ComponentRef<typeof TabsPrimitive.Tab>,
|
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Tab>
|
|
>(({ className, ...props }, ref) => (
|
|
<TabsPrimitive.Tab
|
|
ref={ref}
|
|
className={cn(
|
|
"ring-offset-background focus-visible:ring-ring data-selected:text-foreground z-1 inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
));
|
|
TabsTrigger.displayName = TabsPrimitive.Tab.displayName;
|
|
|
|
const TabsContent = React.forwardRef<
|
|
React.ComponentRef<typeof TabsPrimitive.Panel>,
|
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Panel>
|
|
>(({ className, ...props }, ref) => (
|
|
<TabsPrimitive.Panel
|
|
ref={ref}
|
|
className={cn(
|
|
"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
));
|
|
TabsContent.displayName = TabsPrimitive.Panel.displayName;
|
|
|
|
export { Tabs, TabsList, TabsTrigger, TabsContent, TabsIndicator };
|