Flex

1import type { Component, ComponentProps } from "solid-js"
2import { mergeProps, splitProps } from "solid-js"
3 
4import { cn } from "~/lib/utils"
5 
6type JustifyContent = "start" | "end" | "center" | "between" | "around" | "evenly"
7type AlignItems = "start" | "end" | "center" | "baseline" | "stretch"
8type FlexDirection = "row" | "col" | "row-reverse" | "col-reverse"
9 
10type FlexProps = ComponentProps<"div"> & {
11  flexDirection?: FlexDirection
12  justifyContent?: JustifyContent
13  alignItems?: AlignItems
14}
15 
16const Flex: Component<FlexProps> = (rawProps) => {
17  const props = mergeProps(
18    {
19      flexDirection: "row",
20      justifyContent: "between",
21      alignItems: "center"
22    } satisfies FlexProps,
23    rawProps
24  )
25  const [local, others] = splitProps(props, [
26    "flexDirection",
27    "justifyContent",
28    "alignItems",
29    "class"
30  ])
31 
32  return (
33    <div
34      class={cn(
35        "flex w-full",
36        flexDirectionClassNames[local.flexDirection],
37        justifyContentClassNames[local.justifyContent],
38        alignItemsClassNames[local.alignItems],
39        local.class
40      )}
41      {...others}
42    />
43  )
44}
45 
46export { Flex }
47 
48const justifyContentClassNames: { [key in JustifyContent]: string } = {
49  start: "justify-start",
50  end: "justify-end",
51  center: "justify-center",
52  between: "justify-between",
53  around: "justify-around",
54  evenly: "justify-evenly"
55}
56 
57const alignItemsClassNames: { [key in AlignItems]: string } = {
58  start: "items-start",
59  end: "items-end",
60  center: "items-center",
61  baseline: "items-baseline",
62  stretch: "items-stretch"
63}
64 
65const flexDirectionClassNames: { [key in FlexDirection]: string } = {
66  row: "flex-row",
67  col: "flex-col",
68  "row-reverse": "flex-row-reverse",
69  "col-reverse": "flex-col-reverse"
70}