Drawer

1import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type {
5  ContentProps,
6  DescriptionProps,
7  DynamicProps,
8  LabelProps,
9  OverlayProps
10} from "@corvu/drawer"
11import DrawerPrimitive from "@corvu/drawer"
12 
13import { cn } from "~/lib/utils"
14 
15const Drawer = DrawerPrimitive
16 
17const DrawerTrigger = DrawerPrimitive.Trigger
18 
19const DrawerPortal = DrawerPrimitive.Portal
20 
21const DrawerClose = DrawerPrimitive.Close
22 
23type DrawerOverlayProps<T extends ValidComponent = "div"> = OverlayProps<T> & { class?: string }
24 
25const DrawerOverlay = <T extends ValidComponent = "div">(
26  props: DynamicProps<T, DrawerOverlayProps<T>>
27) => {
28  const [, rest] = splitProps(props as DrawerOverlayProps, ["class"])
29  const drawerContext = DrawerPrimitive.useContext()
30  return (
31    <DrawerPrimitive.Overlay
32      class={cn(
33        "fixed inset-0 z-50 data-[transitioning]:transition-colors data-[transitioning]:duration-300",
34        props.class
35      )}
36      style={{
37        "background-color": `rgb(0 0 0 / ${0.8 * drawerContext.openPercentage()})`
38      }}
39      {...rest}
40    />
41  )
42}
43 
44type DrawerContentProps<T extends ValidComponent = "div"> = ContentProps<T> & {
45  class?: string
46  children?: JSX.Element
47}
48 
49const DrawerContent = <T extends ValidComponent = "div">(
50  props: DynamicProps<T, DrawerContentProps<T>>
51) => {
52  const [, rest] = splitProps(props as DrawerContentProps, ["class", "children"])
53  return (
54    <DrawerPortal>
55      <DrawerOverlay />
56      <DrawerPrimitive.Content
57        class={cn(
58          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background after:absolute after:inset-x-0 after:top-full after:h-1/2 after:bg-inherit data-[transitioning]:transition-transform data-[transitioning]:duration-300 md:select-none",
59          props.class
60        )}
61        {...rest}
62      >
63        <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
64        {props.children}
65      </DrawerPrimitive.Content>
66    </DrawerPortal>
67  )
68}
69 
70const DrawerHeader: Component<ComponentProps<"div">> = (props) => {
71  const [, rest] = splitProps(props, ["class"])
72  return <div class={cn("grid gap-1.5 p-4 text-center sm:text-left", props.class)} {...rest} />
73}
74 
75const DrawerFooter: Component<ComponentProps<"div">> = (props) => {
76  const [, rest] = splitProps(props, ["class"])
77  return <div class={cn("t-auto flex flex-col gap-2 p-4", props.class)} {...rest} />
78}
79 
80// … truncated