diff --git a/__registry__/index.tsx b/__registry__/index.tsx index 9b9ef06aa..735a94942 100644 --- a/__registry__/index.tsx +++ b/__registry__/index.tsx @@ -2079,6 +2079,19 @@ export const Index: Record = { subcategory: "undefined", chunks: [], }, + "safari-demo-4": { + name: "safari-demo-4", + type: "registry:example", + registryDependencies: undefined, + files: ["registry/default/example/safari-demo-4.tsx"], + component: React.lazy( + () => import("@/registry/default/example/safari-demo-4.tsx"), + ), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [], + }, "iphone-15-pro-demo": { name: "iphone-15-pro-demo", type: "registry:example", diff --git a/content/docs/components/safari.mdx b/content/docs/components/safari.mdx index 3403a4631..950b2f6d8 100644 --- a/content/docs/components/safari.mdx +++ b/content/docs/components/safari.mdx @@ -50,14 +50,21 @@ npx shadcn@latest add "https://magicui.design/r/safari" +### Simple Mode + + + ## Props -| Prop | Type | Default | Description | -| ---------- | -------- | ------- | ----------------------------------------------------------- | -| `url` | `string` | `-` | The URL to display in the Safari address bar | -| `imageSrc` | `string` | `-` | The source URL of the image to display in the Safari window | -| `videoSrc` | `string` | `-` | The source URL of the video to display in the Safari window | -| `width` | `number` | `1203` | The width of the Safari window | -| `height` | `number` | `753` | The height of the Safari window | +| Prop | Type | Default | Description | +| ---------- | ------------ | ----------- | ----------------------------------------------------------- | +| `url` | `string` | `-` | The URL to display in the Safari address bar | +| `imageSrc` | `string` | `-` | The source URL of the image to display in the Safari window | +| `videoSrc` | `string` | `-` | The source URL of the video to display in the Safari window | +| `width` | `number` | `1203` | The width of the Safari window | +| `height` | `number` | `753` | The height of the Safari window | +| `mode` | `SafariMode` | `"default"` | The display mode of the Safari window. | + +type `SafariMode` = `"default" | "simple"`. The `Safari` component also accepts all properties of the `SVGElement` type. diff --git a/public/r/styles/default/safari.json b/public/r/styles/default/safari.json index 32854bd79..2cd64fe40 100644 --- a/public/r/styles/default/safari.json +++ b/public/r/styles/default/safari.json @@ -4,7 +4,7 @@ "files": [ { "path": "magicui/safari.tsx", - "content": "import { SVGProps } from \"react\";\n\nexport interface SafariProps extends SVGProps {\n url?: string;\n imageSrc?: string;\n videoSrc?: string;\n width?: number;\n height?: number;\n}\n\nexport default function Safari({\n imageSrc,\n videoSrc,\n url,\n width = 1203,\n height = 753,\n ...props\n}: SafariProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {url}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {imageSrc && (\n \n )}\n {videoSrc && (\n \n \n \n )}\n \n \n \n \n \n \n \n \n \n \n );\n}\n", + "content": "import { SVGProps } from \"react\";\n\ntype SafariMode = \"default\" | \"simple\";\nexport interface SafariProps extends SVGProps {\n url?: string;\n imageSrc?: string;\n videoSrc?: string;\n width?: number;\n height?: number;\n mode?: SafariMode;\n}\n\nexport default function Safari({\n imageSrc,\n videoSrc,\n url,\n width = 1203,\n height = 753,\n mode = \"default\",\n ...props\n}: SafariProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {url}\n \n \n {mode === \"default\" ? (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n ) : null}\n {imageSrc && (\n \n )}\n {videoSrc && (\n \n \n \n )}\n \n \n \n \n \n \n \n \n \n \n );\n}\n", "type": "registry:ui", "target": "" } diff --git a/registry/default/example/safari-demo-4.tsx b/registry/default/example/safari-demo-4.tsx new file mode 100644 index 000000000..f81d9b7a7 --- /dev/null +++ b/registry/default/example/safari-demo-4.tsx @@ -0,0 +1,9 @@ +import Safari from "@/registry/default/magicui/safari"; + +export default function SafariDemo() { + return ( +
+ +
+ ); +} diff --git a/registry/default/magicui/safari.tsx b/registry/default/magicui/safari.tsx index 346dbbce4..fdad643ce 100644 --- a/registry/default/magicui/safari.tsx +++ b/registry/default/magicui/safari.tsx @@ -1,11 +1,14 @@ import { SVGProps } from "react"; +type SafariMode = "default" | "simple"; + export interface SafariProps extends SVGProps { url?: string; imageSrc?: string; videoSrc?: string; width?: number; height?: number; + mode?: SafariMode; } export default function Safari({ @@ -14,6 +17,7 @@ export default function Safari({ url, width = 1203, height = 753, + mode = "default", ...props }: SafariProps) { return ( @@ -81,54 +85,58 @@ export default function Safari({ {url} - - - - - - - - - - - - - - - - - - - - - - - - + {mode === "default" ? ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + ) : null} {imageSrc && (