diff --git a/public/tldraw-lockup.svg b/public/tldraw-lockup.svg
deleted file mode 100644
index 5192128..0000000
--- a/public/tldraw-lockup.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
diff --git a/src/app/globals.css b/src/app/globals.css
index a52ec60..52ccf1b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,33 +1,79 @@
-@import url("@tldraw/tldraw/tldraw.css");
+@import url('@tldraw/tldraw/tldraw.css');
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
+ --foreground-rgb: 0, 0, 0;
+ --background-start-rgb: 214, 219, 220;
+ --background-end-rgb: 255, 255, 255;
}
@media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
- }
+ :root {
+ --foreground-rgb: 255, 255, 255;
+ --background-start-rgb: 0, 0, 0;
+ --background-end-rgb: 0, 0, 0;
+ }
}
body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
+ color: rgb(var(--foreground-rgb));
+ background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
+ rgb(var(--background-start-rgb));
}
-/* .tl-frame-heading {
- display: none;
-} */
+.lockup__link img.lockup__by {
+ height: 40px;
+ padding-right: 2px;
+}
+
+.lockup__link {
+ color: var(--color-text);
+ position: absolute;
+ z-index: var(--layer-panels);
+ bottom: 0px;
+ right: 0px;
+ display: flex;
+ flex-direction: row;
+ gap: 10px;
+ height: 45px;
+ padding-right: 10px;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.lockup__link a,
+.lockup__link img,
+.lockup__link svg {
+ height: 100%;
+ /* width: 100%; */
+}
+
+.fal-logo {
+ /* margin-left: -4px; */
+}
+
+.lockup__link__mobile {
+ bottom: 60px;
+}
+
+.tlui-help-menu {
+ display: none !important;
+}
+
+.lockup {
+ /* padding: 0px; */
+ width: 120px;
+}
+
+.tlui-debug-panel {
+ display: none !important;
+}
+
+.lockup__collab {
+ font-size: 20px;
+ font-weight: 200;
+ /* padding: 0px 4px; */
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index cfd8c1f..5927b63 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
'use client'
import { LiveImageShape, LiveImageShapeUtil } from '@/components/LiveImageShapeUtil'
+import { LockupLink } from '@/components/LockupLink'
import * as fal from '@fal-ai/serverless-client'
import {
DefaultSizeStyle,
@@ -91,6 +92,7 @@ export default function Home() {
overrides={overrides}
>
+
diff --git a/src/components/Collab.tsx b/src/components/Collab.tsx
new file mode 100644
index 0000000..ae79139
--- /dev/null
+++ b/src/components/Collab.tsx
@@ -0,0 +1,22 @@
+// An 'x' svg icon that represents collaboration between two organisations.
+// eg: tldraw x fal
+export function Collab() {
+ return (
+
+ )
+}
diff --git a/src/components/LockupLink.tsx b/src/components/LockupLink.tsx
new file mode 100644
index 0000000..cf37998
--- /dev/null
+++ b/src/components/LockupLink.tsx
@@ -0,0 +1,121 @@
+/* eslint-disable @next/next/no-img-element */
+import { useBreakpoint } from '@tldraw/tldraw'
+import { FalLogo } from './fal-logo'
+
+export function LockupLink() {
+ const breakpoint = useBreakpoint()
+ // const editor = useEditor()
+ // const isFocusMode = useValue('isFocusMode', () => editor.getInstanceState().isFocusMode, [editor])
+
+ // if (isFocusMode) return null
+
+ return (
+
+
+ {/* 
*/}
+
+
+ {/* 
*/}
+
+ ×
+
+
+
+
+ )
+}
+
+function Lockup() {
+ return (
+
+ )
+}
+
+// Janky as hell but I gotta do talk-prep
+function By() {
+ return (
+
+ )
+}
diff --git a/src/components/fal-logo.tsx b/src/components/fal-logo.tsx
index b2009cd..aee2423 100644
--- a/src/components/fal-logo.tsx
+++ b/src/components/fal-logo.tsx
@@ -1,202 +1,176 @@
export function FalLogo() {
- return (
-
- );
+ return (
+
+ )
}