diff --git a/components/src/components/layout/viewport/Viewport.tsx b/components/src/components/layout/viewport/Viewport.tsx index 73ada1d3..af4a26a3 100644 --- a/components/src/components/layout/viewport/Viewport.tsx +++ b/components/src/components/layout/viewport/Viewport.tsx @@ -1,7 +1,8 @@ import { forwardRef } from "react"; import { useTheme } from "styled-components"; -import { StyledViewport } from "./styles"; +import { Badge } from "../../ui/badge"; import { RenderLayout } from "../RenderLayout"; +import { StyledViewport } from "./styles"; /* eslint-disable-next-line @typescript-eslint/no-empty-object-type */ export interface ViewportProps extends React.HTMLProps {} @@ -17,6 +18,7 @@ export const Viewport = forwardRef( {...props} > {children} + ); }, diff --git a/components/src/components/ui/badge/Badge.tsx b/components/src/components/ui/badge/Badge.tsx new file mode 100644 index 00000000..acce9f38 --- /dev/null +++ b/components/src/components/ui/badge/Badge.tsx @@ -0,0 +1,71 @@ +import { useEmbed } from "../../../hooks"; +import { Box, Flex } from ".."; + +export const Badge = () => { + const { settings } = useEmbed(); + return ( + + + Powered by + + + + + + + + + + + + + + + + ); +}; diff --git a/components/src/components/ui/badge/index.ts b/components/src/components/ui/badge/index.ts new file mode 100644 index 00000000..ae21190b --- /dev/null +++ b/components/src/components/ui/badge/index.ts @@ -0,0 +1 @@ +export * from "./Badge"; diff --git a/components/src/context/embed.tsx b/components/src/context/embed.tsx index 6da937eb..c50ec66c 100644 --- a/components/src/context/embed.tsx +++ b/components/src/context/embed.tsx @@ -10,6 +10,7 @@ import { type ComponentHydrateResponseData, } from "../api"; import type { + ComponentProps, RecursivePartial, SerializedEditorState, SerializedNodeWithChildren, @@ -117,10 +118,16 @@ export const defaultTheme: EmbedThemeSettings = { export type EmbedSettings = { theme: EmbedThemeSettings; + badge: { + alignment: ComponentProps["$justifyContent"]; + }; }; export const defaultSettings: EmbedSettings = { theme: defaultTheme, + badge: { + alignment: "start", + }, }; /* eslint-disable-next-line @typescript-eslint/no-explicit-any */