{children}
123 |
59 |
85 | );
86 | };
87 |
88 | export default React.memo(LayoutA);
89 |
--------------------------------------------------------------------------------
/app/(og-playground)/components/gradient-selector.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React from "react";
3 | import useLayoutAStore from "@/app/(og-playground)/store/layouts/layout-a";
4 | import useGradientStore from "@/app/(og-playground)/store/gradient";
5 | import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
6 | import { Label } from "@/components/ui/label";
7 | import { ScrollArea } from "@/components/ui/scroll-area";
8 |
9 | const GradientOption = ({ gradient }: { gradient: any }) => (
10 |
60 |
77 |
61 | 
66 |
67 | {companyName}
68 |
69 |
70 |
71 |
76 | 72 | {title} 73 |
74 |{ctaText}
75 |
78 | 
83 |
84 |
11 |
28 | );
29 |
30 | const GradientSelector = () => {
31 | const { gradients, selectedGradient, setSelectedGradient } =
32 | useGradientStore();
33 | const { setGradientStart, setGradientEnd } = useLayoutAStore();
34 |
35 | const handleGradientChange = (gradientName: any) => {
36 | const gradient = gradients.find((g) => g.name === gradientName);
37 | if (gradient) {
38 | setSelectedGradient(gradient);
39 | setGradientStart(gradient.startColor);
40 | setGradientEnd(gradient.endColor);
41 | }
42 | };
43 |
44 | return (
45 | This is for Editor!
,
30 | disabled: true,
31 | },
32 | ];
33 |
34 | export default function OGPlayground() {
35 | return (
36 |
44 |
48 |
45 | {metaTags}
46 |
47 |
54 |
76 |
77 |
95 |
96 | }
97 |
98 | );
99 | };
100 |
101 | export default SaveOGMetadata;
102 |
--------------------------------------------------------------------------------
/app/(og-playground)/components/og-metadata.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { useState } from "react";
3 | import { Input } from "@/components/ui/input";
4 | import { Label } from "@/components/ui/label";
5 | import { Textarea } from "@/components/ui/textarea";
6 | import { AlertCircle } from "lucide-react";
7 | import { Alert, AlertDescription } from "@/components/ui/alert";
8 | import useOGMetadataStore from "@/app/(og-playground)/store/og-metadata";
9 | import OGSaveMetadata from "./og-metadata-save";
10 |
11 | export default function OGMetadataExport() {
12 | const { metadata, setMetadata } = useOGMetadataStore();
13 | const [error, _] = useState("");
14 |
15 | const handleInputChange = (e: any) => {
16 | const { name, value } = e.target;
17 | setMetadata({ [name]: value });
18 | };
19 |
20 | return (
21 |
84 | );
85 | }
86 |
--------------------------------------------------------------------------------
/app/(og-playground)/components/og-renderer.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, {
3 | useRef,
4 | useEffect,
5 | useState,
6 | useMemo,
7 | useCallback,
8 | } from "react";
9 | import { debounce } from "@/lib/utils";
10 | import html2canvas from "html2canvas";
11 | import LayoutA from "./default-renders/layout-a";
12 | import useLayoutAStore from "../store/layouts/layout-a";
13 | import useOGImageStore from "../store/og-renderer";
14 | import { CheckCircle2, Download, Loader } from "lucide-react";
15 | import { Alert, AlertDescription } from "@/components/ui/alert";
16 | import { Skeleton } from "@/components/ui/skeleton";
17 | import { Button } from "@/components/ui/button";
18 | import OGImageMetadataCopy from "./og-medatadata-copy";
19 |
20 | interface OGImageRendererProps {
21 | previewWidth?: number;
22 | }
23 |
24 | const OGImageRenderer: React.FC
55 |
73 |
{" "}
74 | {
75 | 78 | OG Image Content Link 79 |
80 | {isLoading ? ( 81 |
82 |
85 | ) : (
86 | 87 | {!user 88 | ? "Login to get your og:image metatag url" 89 | : metadata.cid 90 | ? `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/get-og?cid=${metadata.cid}` 91 | : "Save to generate og image metatag url"} 92 |
93 | )} 94 |
77 |
85 |
148 |
149 |
153 | );
154 | });
155 |
156 | export default OGImageRenderer;
157 |
--------------------------------------------------------------------------------
/app/(og-playground)/components/tab-images.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React from "react";
4 | import { Separator } from "@/components/ui/separator";
5 | import useLayoutAStore from "@/app/(og-playground)/store/layouts/layout-a";
6 | import GradientSelector from "./gradient-selector";
7 | import { FileUploadField } from "@/components/settings/file-upload";
8 | import { TextInputField } from "@/components/settings/text-input";
9 | import { ColorInputField } from "@/components/settings/colour-input";
10 | import {
11 | Select,
12 | SelectContent,
13 | SelectItem,
14 | SelectTrigger,
15 | SelectValue,
16 | } from "@/components/ui/select";
17 |
18 | interface LayoutASettings {
19 | companyName: string;
20 | ctaText: string;
21 | title: string;
22 | gradientStart: string;
23 | gradientEnd: string;
24 | logoSrc: string;
25 | imageSrc: string;
26 | gridType: "none" | "lines";
27 | }
28 |
29 | export default function LayoutASettings() {
30 | const {
31 | companyName,
32 | ctaText,
33 | title,
34 | gradientStart,
35 | gradientEnd,
36 | gridType,
37 | setLogoSrc,
38 | setImageSrc,
39 | setCompanyName,
40 | setCtaText,
41 | setTitle,
42 | setGradientStart,
43 | setGradientEnd,
44 | setGridType,
45 | } = useLayoutAStore();
46 |
47 | const handleLogoUpload = (event: React.ChangeEvent
150 |
152 |
51 |
52 |
53 |
54 | Pinata OG!
55 |
56 |
57 |
58 |
84 |
85 |
86 | );
87 | }
88 |
89 | if (isLoading)
90 | return (
91 |
59 |
83 | 60 | Supercharge your web presence with dynamic OG images! 61 |
62 |-
63 |
- 64 | ✓ Easily manage 65 | and update OG images 66 | 67 |
- 68 | ✓ Leverage 69 | Pinata's powerful file APIs 70 | 71 |
- 72 | ✓ Boost your 73 | social media engagement 74 | 75 |
Error: {error}
;
95 |
96 | return (
97 |
98 |
102 |
108 |
109 | );
110 | };
111 |
112 | const MetadataCard = ({ metadata }: { metadata: OGMetadata }) => {
113 | const [copied, setCopied] = useState(false);
114 |
115 | const metaTags = generateMetaTags({
116 | ...metadata,
117 | baseUrl: process.env.NEXT_PUBLIC_API_BASE_URL!,
118 | });
119 |
120 | const copyToClipboard = () => {
121 | navigator.clipboard.writeText(metaTags).then(() => {
122 | setCopied(true);
123 | setTimeout(() => setCopied(false), 2000);
124 | });
125 | };
126 |
127 | return (
128 | 99 | OG Metadata List 100 |
101 |
103 | {metadataList.map((metadata: OGMetadata) => (
104 |
107 |
131 |
132 | {metadata.title}
133 |
134 | {metadata.site_name && (
135 |
136 | {metadata.site_name}
137 |
138 | )}
139 |
140 | {metadata.description && (
141 | 142 | {metadata.description} 143 |
144 | )} 145 |
149 | 
155 |
156 | )}
157 |
158 |
193 |
194 |
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.ts",
8 | "css": "app/globals.css",
9 | "baseColor": "stone",
10 | "cssVariables": true,
11 | "prefix": ""
12 | },
13 | "aliases": {
14 | "components": "@/components",
15 | "utils": "@/lib/utils",
16 | "ui": "@/components/ui",
17 | "lib": "@/lib",
18 | "hooks": "@/hooks"
19 | }
20 | }
--------------------------------------------------------------------------------
/components/layouts/playground-layout.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import Link from "next/link";
3 | import { Home, Menu, Package, Twitter } from "lucide-react";
4 |
5 | import { Badge } from "@/components/ui/badge";
6 | import { Button } from "@/components/ui/button";
7 | import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
8 | import { ReactNode } from "react";
9 | import { ModeToggle } from "@/components/theme-toggle";
10 | import ProfileDisplay from "./profile-display";
11 | import { usePathname } from "next/navigation";
12 | import PinataHackathonSubmissionCard from "./submission-card";
13 |
14 | const navigationItems = [
15 | { href: "/", label: "Image Builder", icon: Home },
16 | { href: "/collections", label: "Collections", icon: Package },
17 | ];
18 |
19 | export default function PlaygroundLayout({
20 | children,
21 | }: {
22 | children: ReactNode;
23 | }) {
24 | const pathname = usePathname();
25 | return (
26 |
27 |
126 | );
127 | }
128 |
--------------------------------------------------------------------------------
/components/layouts/profile-display.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import React, { useMemo } from "react";
3 | import { useAuthStore } from "@/app/(og-playground)/store/auth-user"; // Update this path
4 | import {
5 | DropdownMenu,
6 | DropdownMenuTrigger,
7 | DropdownMenuContent,
8 | DropdownMenuLabel,
9 | DropdownMenuItem,
10 | DropdownMenuSeparator,
11 | } from "@/components/ui/dropdown-menu";
12 | import { Button } from "@/components/ui/button";
13 | import { LogIn, LogOut, Mail, MousePointer2, Paintbrush } from "lucide-react";
14 |
15 | const UserAvatar = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
16 | if (isLoggedIn) {
17 | return (
18 |
28 |
60 |
29 |
59 |
30 |
31 | Pinata OG!
32 |
33 |
37 |
34 |
36 |
38 |
54 |
55 |
56 |
58 |
61 |
62 |
63 |
64 |
72 |
73 |
74 |
90 |
106 |
107 |
121 |
122 |
124 |
125 |
91 |
93 |
94 | Created with love by{" "}
95 |
101 |
105 |
108 | Created with love by{" "}
109 |
115 |
119 |
19 | {
22 | );
23 | }
24 |
25 | return (
26 |
27 |
30 | );
31 | };
32 |
33 | export default function ProfileDisplay() {
34 | const { user, handleLogout, setIsLoginModalOpen } = useAuthStore();
35 |
36 | return (
37 | Start generating OG Images!
29 |
50 |
53 |
54 | {user.email}
55 |
56 |
20 |
21 |
38 | );
39 |
--------------------------------------------------------------------------------
/components/settings/file-upload.tsx:
--------------------------------------------------------------------------------
1 | // FileUploadField.tsx
2 | import React from "react";
3 | import { Label } from "@/components/ui/label";
4 | import { Input } from "@/components/ui/input";
5 |
6 | interface FileUploadFieldProps {
7 | onFileUpload: (event: React.ChangeEvent
22 | onChange(e.target.value)}
27 | className="h-10 w-10 cursor-pointer"
28 | />
29 | onChange(e.target.value)}
33 | className="flex-grow"
34 | placeholder="#000000"
35 | />
36 |
37 |
16 |
17 |
23 |
24 | );
25 |
--------------------------------------------------------------------------------
/components/settings/text-input.tsx:
--------------------------------------------------------------------------------
1 | // TextInputField.tsx
2 | import React from "react";
3 | import { Label } from "@/components/ui/label";
4 | import { Input } from "@/components/ui/input";
5 |
6 | interface TextInputFieldProps {
7 | id: string;
8 | label: string;
9 | value: string;
10 | onChange: (value: string) => void;
11 | }
12 |
13 | export const TextInputField: React.FC
20 |
21 | onChange(e.target.value)} />
22 |
23 | );
24 |
--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import * as React from "react";
4 | import { ThemeProvider as NextThemesProvider } from "next-themes";
5 | import { type ThemeProviderProps } from "next-themes/dist/types";
6 |
7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
8 | return
60 |
62 | {children}
63 |
64 |
65 |