66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
/* eslint-disable react-native/no-inline-styles */
|
|
import { StyleProp, View, ViewStyle } from "react-native"
|
|
|
|
import { useAppTheme } from "@/theme/context"
|
|
import type { ThemedStyle } from "@/theme/types"
|
|
import { s } from "@/utils/responsive"
|
|
|
|
interface DemoDividerProps {
|
|
type?: "vertical" | "horizontal"
|
|
size?: number
|
|
style?: StyleProp<ViewStyle>
|
|
line?: boolean
|
|
}
|
|
|
|
/**
|
|
* @param {DemoDividerProps} props - The props for the `DemoDivider` component.
|
|
* @returns {JSX.Element} The rendered `DemoDivider` component.
|
|
*/
|
|
export function DemoDivider(props: DemoDividerProps) {
|
|
const { type = "horizontal", size = 10, line = false, style: $styleOverride } = props
|
|
const { themed } = useAppTheme()
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
$divider,
|
|
type === "horizontal" && { height: size },
|
|
type === "vertical" && { width: size },
|
|
$styleOverride,
|
|
]}
|
|
>
|
|
{line && (
|
|
<View
|
|
style={[
|
|
themed($line),
|
|
type === "horizontal" && {
|
|
width: s(150),
|
|
height: 1,
|
|
marginStart: s(-75),
|
|
marginTop: -1,
|
|
},
|
|
type === "vertical" && {
|
|
height: s(50),
|
|
width: 1,
|
|
marginTop: s(-25),
|
|
marginStart: -1,
|
|
},
|
|
]}
|
|
/>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const $divider: ViewStyle = {
|
|
flexGrow: 0,
|
|
flexShrink: 0,
|
|
}
|
|
|
|
const $line: ThemedStyle<ViewStyle> = ({ colors }) => ({
|
|
backgroundColor: colors.border,
|
|
position: "absolute",
|
|
left: "50%",
|
|
top: "50%",
|
|
})
|