images etc

MustafaHanif007 · Nov 15, 2023 · 3d22bc6 · 3d22bc6
1 parent 32c12bb
commit 3d22bc6
Show file tree

Hide file tree

Showing 16 changed files with 169 additions and 27 deletions.
diff --git a/app/components/ExportButton.tsx b/app/components/ExportButton.tsx
@@ -98,8 +98,8 @@ export function ExportButton() {
 					setLoading(false)
 				}
 			}}
-			className="fixed bottom-4 right-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ="
-			style={{ zIndex: 1000 }}
+			className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-2"
+			style={{ cursor: 'pointer', zIndex: 100000, pointerEvents: 'all' }}
 		>
 			{loading ? (
 				<div className="flex justify-center items-center ">

diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,28 +1,84 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
 
-const inter = Inter({ subsets: ["latin"] });
+const TITLE = 'draw my ui'
+const DESCRIPTION = 'Draw a ui with tldraw.'
+const TWITTER_HANDLE = '@tldraw'
+const TWITTER_CARD = 'social-twitter.png'
+const FACEBOOK_CARD = 'social-og.png'
+const THEME_COLOR = '#FFFFFF'
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+	metadataBase: new URL('https://www.tldraw.dev'),
+	title: {
+		default: TITLE,
+		template: `%s • ${TITLE}`,
+	},
+	description: DESCRIPTION,
+	openGraph: {
+		title: TITLE,
+		description: DESCRIPTION,
+		siteName: TITLE,
+		type: 'website',
+		url: 'https://tldraw.dev',
+		images: FACEBOOK_CARD,
+	},
+	twitter: {
+		creator: TWITTER_HANDLE,
+		description: DESCRIPTION,
+		card: 'summary_large_image',
+		images: TWITTER_CARD,
+	},
+	applicationName: TITLE,
+	appleWebApp: {
+		capable: true,
+		title: TITLE,
+		statusBarStyle: 'black',
+	},
+	formatDetection: {
+		telephone: false,
+	},
+	icons: [
+		{ rel: 'mask-icon', url: 'safari-pinned-tab.svg', color: THEME_COLOR },
+		{ rel: 'shortcut icon', url: '/favicon.svg' },
+		{ rel: 'icon', url: 'favicon-32x32.png', sizes: '32x32' },
+		{ rel: 'icon', url: 'favicon-16x16.png', sizes: '16x16' },
+		{ rel: 'apple-touch-icon', url: 'touch-icon-iphone.png' },
+		{
+			rel: 'apple-touch-icon',
+			url: 'apple-touch-icon-152x152.png',
+			sizes: '152x152',
+		},
+		{
+			rel: 'apple-touch-icon',
+			url: 'apple-touch-icon-180x180.png',
+			sizes: '180x180',
+		},
+		{
+			rel: 'apple-touch-icon',
+			url: 'apple-touch-icon-167x167.png',
+			sizes: '167x167',
+		},
+	],
+}
+
+const inter = Inter({ subsets: ['latin'] })
 
 export default function RootLayout({
-  children,
+	children,
 }: {
-  children: React.ReactNode;
+	children: React.ReactNode
 }) {
-  return (
-    <html lang="en">
-      <head>
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1, viewport-fit=cover"
-        />
-      </head>
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
+	return (
+		<html lang="en">
+			<head>
+				<meta
+					name="viewport"
+					content="width=device-width, initial-scale=1, viewport-fit=cover"
+				/>
+			</head>
+			<body className={inter.className}>{children}</body>
+		</html>
+	)
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-
 'use client'
+import Lockup from './lockup.svg'
 
 import dynamic from 'next/dynamic'
 import '@tldraw/tldraw/tldraw.css'
@@ -18,8 +18,28 @@ export default function Home() {
 	return (
 		<>
 			<div className={`w-screen h-screen`}>
-				<Tldraw persistenceKey="tldraw" shapeUtils={shapeUtils}>
-					<ExportButton />
+				<Tldraw
+					persistenceKey="tldraw"
+					shapeUtils={shapeUtils}
+					shareZone={<ExportButton />}
+				>
+					<a
+						href="https://www.tldraw.dev"
+						style={{
+							pointerEvents: 'all',
+							position: 'fixed',
+							zIndex: 100000,
+							bottom: 0,
+							right: 0,
+						}}
+					>
+						<img
+							className="lockup"
+							src="/lockup.svg"
+							style={{ padding: 8, height: 40 }}
+						/>
+						{/* <img src={lockup} style={{ height: 40, width: 'auto' }} /> */}
+					</a>
 				</Tldraw>
 			</div>
 		</>

diff --git a/public/apple-touch-icon-152x152.svg b/public/apple-touch-icon-152x152.svg
diff --git a/public/apple-touch-icon-180x180.svg b/public/apple-touch-icon-180x180.svg
diff --git a/public/apple-touch-icon167x167.svg b/public/apple-touch-icon167x167.svg
diff --git a/public/favicon-16x16.svg b/public/favicon-16x16.svg
diff --git a/public/favicon-32x32.svg b/public/favicon-32x32.svg
diff --git a/public/favicon.svg b/public/favicon.svg