Hacer tabs scrolleable en HistoriaClinica para responsive
This commit is contained in:
@@ -1,58 +1,46 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
function ScrollArea({
|
const ScrollArea = React.forwardRef<
|
||||||
className,
|
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
||||||
children,
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
||||||
...props
|
>(({ className, children, ...props }, ref) => (
|
||||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
|
<ScrollAreaPrimitive.Root
|
||||||
return (
|
ref={ref}
|
||||||
<ScrollAreaPrimitive.Root
|
className={cn("relative overflow-hidden", className)}
|
||||||
data-slot="scroll-area"
|
{...props}
|
||||||
className={cn("relative", className)}
|
>
|
||||||
{...props}
|
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
||||||
>
|
{children}
|
||||||
<ScrollAreaPrimitive.Viewport
|
</ScrollAreaPrimitive.Viewport>
|
||||||
data-slot="scroll-area-viewport"
|
<ScrollBar />
|
||||||
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
|
<ScrollAreaPrimitive.Corner />
|
||||||
>
|
</ScrollAreaPrimitive.Root>
|
||||||
{children}
|
))
|
||||||
</ScrollAreaPrimitive.Viewport>
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
|
||||||
<ScrollBar />
|
|
||||||
<ScrollAreaPrimitive.Corner />
|
|
||||||
</ScrollAreaPrimitive.Root>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function ScrollBar({
|
const ScrollBar = React.forwardRef<
|
||||||
className,
|
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
||||||
orientation = "vertical",
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
...props
|
>(({ className, orientation = "vertical", ...props }, ref) => (
|
||||||
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
|
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||||
return (
|
ref={ref}
|
||||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
orientation={orientation}
|
||||||
data-slot="scroll-area-scrollbar"
|
className={cn(
|
||||||
orientation={orientation}
|
"flex touch-none select-none transition-colors",
|
||||||
className={cn(
|
orientation === "vertical" &&
|
||||||
"flex touch-none p-px transition-colors select-none",
|
"h-full w-2.5 border-l border-l-transparent p-[1px]",
|
||||||
orientation === "vertical" &&
|
orientation === "horizontal" &&
|
||||||
"h-full w-2.5 border-l border-l-transparent",
|
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
||||||
orientation === "horizontal" &&
|
className
|
||||||
"h-2.5 flex-col border-t border-t-transparent",
|
)}
|
||||||
className
|
{...props}
|
||||||
)}
|
>
|
||||||
{...props}
|
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
||||||
>
|
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
<ScrollAreaPrimitive.ScrollAreaThumb
|
))
|
||||||
data-slot="scroll-area-thumb"
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
||||||
className="bg-border relative flex-1 rounded-full"
|
|
||||||
/>
|
|
||||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export { ScrollArea, ScrollBar }
|
export { ScrollArea, ScrollBar }
|
||||||
|
|||||||
+43
-54
@@ -5,62 +5,51 @@ import * as TabsPrimitive from "@radix-ui/react-tabs"
|
|||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
function Tabs({
|
const Tabs = TabsPrimitive.Root
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
|
|
||||||
return (
|
|
||||||
<TabsPrimitive.Root
|
|
||||||
data-slot="tabs"
|
|
||||||
className={cn("flex flex-col gap-2", className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function TabsList({
|
const TabsList = React.forwardRef<
|
||||||
className,
|
React.ElementRef<typeof TabsPrimitive.List>,
|
||||||
...props
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
||||||
}: React.ComponentProps<typeof TabsPrimitive.List>) {
|
>(({ className, ...props }, ref) => (
|
||||||
return (
|
<TabsPrimitive.List
|
||||||
<TabsPrimitive.List
|
ref={ref}
|
||||||
data-slot="tabs-list"
|
className={cn(
|
||||||
className={cn(
|
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
|
||||||
"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
|
className
|
||||||
className
|
)}
|
||||||
)}
|
{...props}
|
||||||
{...props}
|
/>
|
||||||
/>
|
))
|
||||||
)
|
TabsList.displayName = TabsPrimitive.List.displayName
|
||||||
}
|
|
||||||
|
|
||||||
function TabsTrigger({
|
const TabsTrigger = React.forwardRef<
|
||||||
className,
|
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
||||||
...props
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
|
||||||
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
|
>(({ className, ...props }, ref) => (
|
||||||
return (
|
<TabsPrimitive.Trigger
|
||||||
<TabsPrimitive.Trigger
|
ref={ref}
|
||||||
data-slot="tabs-trigger"
|
className={cn(
|
||||||
className={cn(
|
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
|
||||||
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
className
|
||||||
className
|
)}
|
||||||
)}
|
{...props}
|
||||||
{...props}
|
/>
|
||||||
/>
|
))
|
||||||
)
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
|
||||||
}
|
|
||||||
|
|
||||||
function TabsContent({
|
const TabsContent = React.forwardRef<
|
||||||
className,
|
React.ElementRef<typeof TabsPrimitive.Content>,
|
||||||
...props
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
||||||
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
|
>(({ className, ...props }, ref) => (
|
||||||
return (
|
<TabsPrimitive.Content
|
||||||
<TabsPrimitive.Content
|
ref={ref}
|
||||||
data-slot="tabs-content"
|
className={cn(
|
||||||
className={cn("flex-1 outline-none", className)}
|
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||||
{...props}
|
className
|
||||||
/>
|
)}
|
||||||
)
|
{...props}
|
||||||
}
|
/>
|
||||||
|
))
|
||||||
|
TabsContent.displayName = TabsPrimitive.Content.displayName
|
||||||
|
|
||||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||||
|
|||||||
@@ -47,6 +47,7 @@ import { Label } from '@/components/ui/label';
|
|||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
|
||||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
||||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
||||||
@@ -470,46 +471,49 @@ export function HistoriaClinica({
|
|||||||
|
|
||||||
|
|
||||||
<Tabs value={tabActivo} onValueChange={setTabActivo}>
|
<Tabs value={tabActivo} onValueChange={setTabActivo}>
|
||||||
<TabsList className="flex w-full overflow-x-auto gap-1 pb-2">
|
<ScrollArea className="w-full whitespace-nowrap rounded-md">
|
||||||
<TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
<TabsList className="flex w-full gap-1 pb-2">
|
||||||
<FileText className="h-3 w-3 sm:h-4 sm:w-4" />
|
<TabsTrigger value="evoluciones" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
||||||
<span className="hidden sm:inline">Evoluciones</span>
|
<FileText className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||||
<span className="sm:hidden">Evol</span>
|
<span className="hidden sm:inline">Evoluciones</span>
|
||||||
({evoluciones.length})
|
<span className="sm:hidden">Evol</span>
|
||||||
</TabsTrigger>
|
({evoluciones.length})
|
||||||
<TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
</TabsTrigger>
|
||||||
<FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
|
<TabsTrigger value="laboratorios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
||||||
<span className="hidden sm:inline">Laboratorio</span>
|
<FlaskConical className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||||
<span className="sm:hidden">Lab</span>
|
<span className="hidden sm:inline">Laboratorio</span>
|
||||||
({laboratorios.length})
|
<span className="sm:hidden">Lab</span>
|
||||||
</TabsTrigger>
|
({laboratorios.length})
|
||||||
<TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
</TabsTrigger>
|
||||||
<Activity className="h-3 w-3 sm:h-4 sm:w-4" />
|
<TabsTrigger value="acidobase" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
||||||
<span className="hidden sm:inline">EAB</span>
|
<Activity className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||||
<span className="sm:hidden">EAB</span>
|
<span className="hidden sm:inline">EAB</span>
|
||||||
({acidosBase.length})
|
<span className="sm:hidden">EAB</span>
|
||||||
</TabsTrigger>
|
({acidosBase.length})
|
||||||
<TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
</TabsTrigger>
|
||||||
<Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
|
<TabsTrigger value="cultivos" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
||||||
<span className="hidden sm:inline">Cultivos</span>
|
<Microscope className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||||
<span className="sm:hidden">Cult</span>
|
<span className="hidden sm:inline">Cultivos</span>
|
||||||
({cultivos.length})
|
<span className="sm:hidden">Cult</span>
|
||||||
</TabsTrigger>
|
({cultivos.length})
|
||||||
<TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
</TabsTrigger>
|
||||||
<Pill className="h-3 w-3 sm:h-4 sm:w-4" />
|
<TabsTrigger value="atb" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
||||||
<span className="hidden sm:inline">ATB</span>
|
<Pill className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||||
</TabsTrigger>
|
<span className="hidden sm:inline">ATB</span>
|
||||||
<TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
</TabsTrigger>
|
||||||
<ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
|
<TabsTrigger value="estudios" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
||||||
<span className="hidden sm:inline">Estudios</span>
|
<ClipboardList className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||||
<span className="sm:hidden">Est</span>
|
<span className="hidden sm:inline">Estudios</span>
|
||||||
({estudiosComplementarios.length})
|
<span className="sm:hidden">Est</span>
|
||||||
</TabsTrigger>
|
({estudiosComplementarios.length})
|
||||||
<TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
</TabsTrigger>
|
||||||
<Users className="h-3 w-3 sm:h-4 sm:w-4" />
|
<TabsTrigger value="interconsultas" className="flex-shrink-0 flex items-center gap-1 text-xs sm:text-sm">
|
||||||
<span className="hidden sm:inline">Interconsultas</span>
|
<Users className="h-3 w-3 sm:h-4 sm:w-4" />
|
||||||
</TabsTrigger>
|
<span className="hidden sm:inline">Interconsultas</span>
|
||||||
</TabsList>
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
<ScrollBar orientation="horizontal" />
|
||||||
|
</ScrollArea>
|
||||||
|
|
||||||
<TabsContent value="laboratorios" className="mt-4">
|
<TabsContent value="laboratorios" className="mt-4">
|
||||||
<SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />
|
<SeccionLaboratorios lab={laboratorios} patientId={paciente.id} add={onAgregarLaboratorio} update={onActualizarLaboratorio} del={onEliminarLaboratorio} addAcidoBase={onAgregarAcidoBase} />
|
||||||
|
|||||||
Reference in New Issue
Block a user