Skip to content

Commit 2d7cf5c

Browse files
dillionvermadillionverma
committed
fix: add pro preview blocks
1 parent 51dc2b7 commit 2d7cf5c

File tree

8 files changed

+240
-5
lines changed

8 files changed

+240
-5
lines changed

‎apps/www/components/pro-component-preview.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
"use client";
2+
import { ResizablePreview } from "@/components/ui/resizable-preview";
3+
import { cn } from "@/lib/utils";
4+
import React from "react";
5+
6+
export function ProComponentPreview({
7+
name,
8+
className,
9+
}: {
10+
name: string;
11+
className?: string;
12+
}) {
13+
const [isDark, setIsDark] = React.useState(false);
14+
15+
return (
16+
<div className={cn("relative mx-auto my-4", className)}>
17+
<ResizablePreview
18+
showControls={true}
19+
minHeight={600}
20+
showThemeToggle={true}
21+
isDark={isDark}
22+
onThemeToggle={() => setIsDark(!isDark)}
23+
>
24+
<iframe
25+
src={`https://pro.magicui.design/preview/${name}${isDark ? "?theme=dark" : "?theme=light"}`}
26+
className="w-full h-full border-0"
27+
title={`${name} preview`}
28+
/>
29+
</ResizablePreview>
30+
</div>
31+
);
32+
}

‎apps/www/components/ui/resizable-preview.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
"use client";
2+
3+
import { Button } from "@/components/ui/button";
4+
import {
5+
ResizableHandle,
6+
ResizablePanel,
7+
ResizablePanelGroup,
8+
} from "@/components/ui/resizable";
9+
import { cn } from "@/lib/utils";
10+
import { Moon, Sun } from "lucide-react";
11+
import React from "react";
12+
13+
interface ResizablePreviewProps {
14+
children: React.ReactNode;
15+
className?: string;
16+
showControls?: boolean;
17+
minHeight?: number;
18+
showThemeToggle?: boolean;
19+
isDark?: boolean;
20+
onThemeToggle?: () => void;
21+
}
22+
23+
export function ResizablePreview({
24+
children,
25+
className,
26+
showControls = true,
27+
minHeight = 500,
28+
showThemeToggle = false,
29+
isDark = false,
30+
onThemeToggle,
31+
}: ResizablePreviewProps) {
32+
return (
33+
<div
34+
className={cn(
35+
"relative border border-border rounded-lg overflow-hidden",
36+
className,
37+
)}
38+
>
39+
{/* Controls */}
40+
{showControls && (
41+
<div className="flex items-center justify-end p-3 bg-muted/5 border-b border-border">
42+
{showThemeToggle && onThemeToggle && (
43+
<Button
44+
onClick={onThemeToggle}
45+
variant="outline"
46+
size="sm"
47+
className="h-8 px-3"
48+
title="Toggle theme"
49+
>
50+
{isDark ? (
51+
<Sun className="h-4 w-4" />
52+
) : (
53+
<Moon className="h-4 w-4" />
54+
)}
55+
</Button>
56+
)}
57+
</div>
58+
)}
59+
60+
<ResizablePanelGroup direction="horizontal" style={{ minHeight }}>
61+
<ResizablePanel
62+
defaultSize={100}
63+
minSize={30}
64+
className="flex items-center justify-center p-0 "
65+
>
66+
{children}
67+
</ResizablePanel>
68+
69+
<ResizableHandle
70+
withHandle
71+
className="w-3 bg-muted/30 hover:bg-muted/60 transition-colors"
72+
/>
73+
74+
<ResizablePanel
75+
defaultSize={0}
76+
minSize={0}
77+
className="flex items-center justify-center bg-muted/10"
78+
></ResizablePanel>
79+
</ResizablePanelGroup>
80+
</div>
81+
);
82+
}

‎apps/www/components/ui/resizable.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
"use client"
2+
3+
import { GripVertical } from "lucide-react"
4+
import * as ResizablePrimitive from "react-resizable-panels"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
const ResizablePanelGroup = ({
9+
className,
10+
...props
11+
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
12+
<ResizablePrimitive.PanelGroup
13+
className={cn(
14+
"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
15+
className
16+
)}
17+
{...props}
18+
/>
19+
)
20+
21+
const ResizablePanel = ResizablePrimitive.Panel
22+
23+
const ResizableHandle = ({
24+
withHandle,
25+
className,
26+
...props
27+
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
28+
withHandle?: boolean
29+
}) => (
30+
<ResizablePrimitive.PanelResizeHandle
31+
className={cn(
32+
"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
33+
className
34+
)}
35+
{...props}
36+
>
37+
{withHandle && (
38+
<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
39+
<GripVertical className="h-2.5 w-2.5" />
40+
</div>
41+
)}
42+
</ResizablePrimitive.PanelResizeHandle>
43+
)
44+
45+
export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

‎apps/www/config/docs.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,19 @@ export const docsConfig: DocsConfig = {
125125
},
126126
],
127127
},
128+
{
129+
title: "Blocks",
130+
paid: true,
131+
items: [
132+
{
133+
title: "Pricing",
134+
href: `/docs/blocks/pricing`,
135+
items: [],
136+
paid: true,
137+
label: "New",
138+
},
139+
],
140+
},
128141
{
129142
title: "Components",
130143
items: [

‎apps/www/content/docs/blocks/pricing.mdx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: Pricing
3+
date: 2025-09-17
4+
description: A pricing component that can be used to display pricing information.
5+
author: dillionverma
6+
published: true
7+
---
8+
9+
<ProComponentPreview name="header-3" />
10+
<ProComponentPreview name="header-4" />
11+
12+
<ProComponentPreview name="hero-1" />
13+
<ProComponentPreview name="hero-2" />
14+
15+
<ProComponentPreview name="social-proof-companies-1" free />
16+
<ProComponentPreview name="social-proof-companies-2" free />
17+
<ProComponentPreview name="social-proof-companies-3" />
18+
<ProComponentPreview name="social-proof-companies-4" />
19+
20+
<ProComponentPreview name="social-proof-press-1" free />
21+
<ProComponentPreview name="social-proof-press-2" free />
22+
<ProComponentPreview name="social-proof-press-3" />
23+
24+
<ProComponentPreview name="social-proof-testimonials-1" />
25+
<ProComponentPreview name="social-proof-testimonials-2" />
26+
<ProComponentPreview name="social-proof-testimonials-3" />
27+
28+
<ProComponentPreview name="feature-1" />
29+
<ProComponentPreview name="feature-2" />
30+
31+
<ProComponentPreview name="pricing-1" />
32+
33+
<ProComponentPreview name="faq-3" />
34+
<ProComponentPreview name="faq-4" />
35+
36+
<ProComponentPreview name="call-to-action-1" />
37+
<ProComponentPreview name="call-to-action-2" />
38+
<ProComponentPreview name="call-to-action-3" />
39+
<ProComponentPreview name="call-to-action-4" />
40+
41+
<ProComponentPreview name="footer-1" />
42+
<ProComponentPreview name="footer-2" />
43+
<ProComponentPreview name="footer-3" />
44+
<ProComponentPreview name="footer-5" />
45+
<ProComponentPreview name="footer-7" />
46+
<ProComponentPreview name="footer-11" />

‎apps/www/mdx-components.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import * as React from "react";
21
import Image from "next/image";
32
import Link from "next/link";
3+
import * as React from "react";
44

5-
import { cn } from "@/lib/utils";
65
import { Callout } from "@/components/callout";
76
import { CodeBlockCommand } from "@/components/code-block-command";
87
import { CodeCollapsibleWrapper } from "@/components/code-collapsible-wrapper";
@@ -12,6 +11,10 @@ import { ComponentSource } from "@/components/component-source";
1211
import { ComponentsList } from "@/components/components-list";
1312
import { CopyButton } from "@/components/copy-button";
1413
import { getIconForLanguageExtension } from "@/components/icons";
14+
import { ProComponentPreview } from "@/components/pro-component-preview";
15+
import { TechStack } from "@/components/tech-stack";
16+
import { TemplateOpen } from "@/components/template-open";
17+
import { TemplatePreview } from "@/components/template-preview";
1518
import {
1619
Accordion,
1720
AccordionContent,
@@ -21,9 +24,7 @@ import {
2124
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
2225
import { Button } from "@/components/ui/button";
2326
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
24-
import { TemplateOpen } from "@/components/template-open";
25-
import { TemplatePreview } from "@/components/template-preview";
26-
import { TechStack } from "@/components/tech-stack";
27+
import { cn } from "@/lib/utils";
2728
import { TweetCard } from "@/registry/magicui/tweet-card";
2829

2930
export const mdxComponents = {
@@ -359,4 +360,5 @@ export const mdxComponents = {
359360
Tweet: ({ id, className }: { id: string; className?: string }) => (
360361
<TweetCard id={id} className={cn("mx-auto", className)} />
361362
),
363+
ProComponentPreview,
362364
};

‎apps/www/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070
"react-day-picker": "^8.10.1",
7171
"react-dom": "19.1.1",
7272
"react-hook-form": "^7.62.0",
73+
"react-resizable-panels": "^3.0.6",
7374
"react-tweet": "^3.2.2",
7475
"rough-notation": "^0.5.1",
7576
"schema-dts": "^1.1.5",

‎pnpm-lock.yaml‎

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)