forked from defunkt/howl
98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
import "hono/jsx"
|
|
import type { FC, PropsWithChildren, JSX } from "hono/jsx"
|
|
import { CodeExamples } from "./code"
|
|
import { cn } from "./cn"
|
|
|
|
type BoxProps = JSX.IntrinsicElements["div"] & PropsWithChildren & {
|
|
bg?: string
|
|
color?: string
|
|
p?: number
|
|
}
|
|
|
|
export const Box: FC<BoxProps> = (props) => {
|
|
const { children, bg, color, p, class: className, style, id, ref, ...rest } = props
|
|
|
|
const boxStyle: JSX.CSSProperties = {
|
|
backgroundColor: bg,
|
|
color: color,
|
|
padding: p ? `${p}px` : undefined,
|
|
...(style as JSX.CSSProperties),
|
|
}
|
|
|
|
return <div class={cn("Box", className)} style={boxStyle} id={id} ref={ref} {...rest}>{children}</div>
|
|
}
|
|
|
|
// Common demo box colors
|
|
export const RedBox: FC<PropsWithChildren> = ({ children }) => (
|
|
<Box bg="#ef4444" p={4} style={{ textAlign: "center" }}>
|
|
{children}
|
|
</Box>
|
|
)
|
|
|
|
export const GreenBox: FC<PropsWithChildren> = ({ children }) => (
|
|
<Box bg="#22c55e" p={4} style={{ textAlign: "center" }}>
|
|
{children}
|
|
</Box>
|
|
)
|
|
|
|
export const BlueBox: FC<PropsWithChildren> = ({ children }) => (
|
|
<Box bg="#3b82f6" p={4} style={{ textAlign: "center" }}>
|
|
{children}
|
|
</Box>
|
|
)
|
|
|
|
export const GrayBox: FC<PropsWithChildren & { style?: JSX.CSSProperties }> = ({ children, style }) => (
|
|
<Box bg="#f3f4f6" p={16} style={style}>
|
|
{children}
|
|
</Box>
|
|
)
|
|
|
|
export const Test = () => {
|
|
return (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "32px", padding: "24px" }}>
|
|
{/* API Usage Examples */}
|
|
<CodeExamples
|
|
examples={[
|
|
'<Box>Content</Box>',
|
|
'<Box bg="#3b82f6" p={16}>Content</Box>',
|
|
'<RedBox>Content</RedBox>',
|
|
'<GrayBox>Content</GrayBox>',
|
|
]}
|
|
/>
|
|
|
|
<div>
|
|
<h2 style={{ fontSize: "20px", fontWeight: "bold", marginBottom: "16px" }}>Box Component</h2>
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
|
|
<Box bg="#3b82f6" color="#ffffff" p={16}>
|
|
Basic Box with custom background and text color
|
|
</Box>
|
|
<Box p={8} style={{ border: "2px solid #d1d5db", borderRadius: "8px" }}>
|
|
Box with padding and border
|
|
</Box>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 style={{ fontSize: "20px", fontWeight: "bold", marginBottom: "16px" }}>Color Variants</h2>
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
|
|
<RedBox>Red Box</RedBox>
|
|
<GreenBox>Green Box</GreenBox>
|
|
<BlueBox>Blue Box</BlueBox>
|
|
<GrayBox>Gray Box</GrayBox>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 style={{ fontSize: "20px", fontWeight: "bold", marginBottom: "16px" }}>Nested Boxes</h2>
|
|
<Box bg="#f3f4f6" p={16}>
|
|
<Box bg="#e5e7eb" p={12}>
|
|
<Box bg="#d1d5db" p={8}>
|
|
Nested boxes demonstration
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|