import { component } from "@recast";
import { Stack } from "./layout/Stack";
import { Panel } from "./components/Panel";
import { Button } from "./controls/Button";
import { styled } from "@recast";
import { theme } from "./theme";
const StyledApp = styled.div /*css*/`
& {
min-height: 100vh;
background: ${theme.colors.bg.base};
color: ${theme.colors.text.base};
}
`;
export const App = component(() => (
<StyledApp>
<Stack direction="vertical" gap="lg">
<Panel
variant="dark"
slots={{
header: <h2>Welcome to Reface</h2>,
footer: (
<Stack direction="horizontal" justify="end">
<Button variant="primary">Get Started</Button>
</Stack>
),
}}
>
<p>Build beautiful interfaces with Reface UI</p>
</Panel>
</Stack>
</StyledApp>
));