feat: update splash (#30)

* feat: update splash * fix: update header gap * fix: remove backdrop blur
QuiiBz · Dec 30, 2023 · e85f5d1 · e85f5d1
1 parent b7f1245
commit e85f5d1
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 11 deletions.
diff --git a/apps/dashboard/src/components/CustomLink.tsx b/apps/dashboard/src/components/CustomLink.tsx
@@ -1,16 +1,17 @@
 import Link from "next/link"
-import type { ReactNode } from "react"
+import type { ComponentProps, ReactNode } from "react"
 
 interface CustomLinkProps {
   icon?: ReactNode
   iconPosition?: 'left' | 'right'
   href: string
+  target?: ComponentProps<typeof Link>['target']
   children: ReactNode
 }
 
-export function CustomLink({ icon, iconPosition = 'left', href, children }: CustomLinkProps) {
+export function CustomLink({ icon, iconPosition = 'left', href, target, children }: CustomLinkProps) {
   return (
-    <Link className="flex gap-2 items-center px-3 py-1 rounded-full text-gray-600 hover:text-gray-900 hover:bg-gray-50 select-none" href={href}>
+    <Link className="flex gap-2 items-center px-3 py-1 rounded-full text-gray-600 hover:text-gray-900 hover:bg-gray-50 select-none" href={href} target={target}>
       {icon && iconPosition === 'left' ? icon : null}
       {children}
       {icon && iconPosition === 'right' ? icon : null}

diff --git a/apps/dashboard/src/components/LeftPanel/ExportSection.tsx b/apps/dashboard/src/components/LeftPanel/ExportSection.tsx
@@ -16,7 +16,12 @@ export function ExportSection() {
   const setSelectedElementId = useElementsStore(state => state.setSelectedElementId)
   const [isLoading, setIsLoading] = useState(false)
 
+  function exportUrl() {
+    toast.error('Not implemented yet!')
+  }
+
   async function exportSvg(showProgress = true) {
+    // Immediately deselect any selected element to remove the outline
     flushSync(() => {
       setSelectedElementId(null)
     })
@@ -94,9 +99,10 @@ export function ExportSection() {
   return (
     <>
       <p className="text-xs text-gray-600">Export</p>
-      <div className="grid grid-cols-1 gap-2 w-full">
-        <Button icon={<SvgIcon />} isLoading={isLoading} onClick={() => exportSvg()}>Export as SVG</Button>
-        <Button icon={<PngIcon />} isLoading={isLoading} onClick={() => exportPng()}>Export as PNG</Button>
+      <div className="grid grid-cols-2 gap-2 w-full">
+        <Button className="col-span-full" icon={<PngIcon />} onClick={exportUrl} variant="success">Export to URL</Button>
+        <Button icon={<SvgIcon />} isLoading={isLoading} onClick={exportSvg}>SVG</Button>
+        <Button icon={<PngIcon />} isLoading={isLoading} onClick={exportPng}>PNG</Button>
       </div>
     </>
   )

diff --git a/apps/dashboard/src/components/Splash/index.tsx b/apps/dashboard/src/components/Splash/index.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from "react";
 import { useSearchParams } from "next/navigation";
 import { OgEditor } from "../OgEditor";
 import { CustomLink } from "../CustomLink";
+import { GitHubIcon } from "../icons/GitHubIcon";
 
 interface OgSplashProps {
   children: ReactNode
@@ -16,14 +17,23 @@ export function Splash({ children }: OgSplashProps) {
     <>
       <OgEditor height={630} imageId={image ?? 'splash'} width={1200} />
       {image ? null : (
-        <div className="w-screen h-screen bg-black/10 flex justify-center items-center absolute top-0 left-0 z-10 backdrop-blur-[1px]">
-          <div className="p-8 rounded-md bg-white shadow-lg shadow-gray-200 w-[980px] h-[636px]">
+        <div className="w-screen h-screen bg-black/10 flex justify-center items-center absolute top-0 left-0 z-10">
+          <div className="p-8 rounded-md bg-white shadow-lg shadow-gray-200 w-[980px] h-[684px]">
             <div className="flex items-center justify-between">
-              <h1 className="text-gray-900 text-2xl">OG Studio</h1>
+              <div className="flex items-center gap-4">
+                <h1 className="text-gray-900 text-2xl">OG Studio</h1>
+                <span className="flex gap-2 items-center px-3 py-1 rounded-full text-white bg-yellow-500 select-none text-xs">
+                  Early preview
+                </span>
+                <CustomLink href="https://github.com/QuiiBz/ogstudio" icon={<GitHubIcon />} target="_blank">
+                  GitHub
+                </CustomLink>
+              </div>
               <CustomLink href="/" icon={<div className="w-6 h-6 rounded-full bg-gray-200 animate-pulse" />} iconPosition="right">
                 Guest
               </CustomLink>
             </div>
+            <p className="text-sm text-gray-600 mt-2 w-2/3">Create static or dynamic Open Graph images with an intuitive, Figma-like visual editor. Browse ready-to-use templates, and export your images to SVG/PNG or to a dynamic URL.</p>
             <div className="h-[1px] w-full bg-gray-100 my-8" />
             {children}
           </div>

diff --git a/apps/dashboard/src/components/forms/Button.tsx b/apps/dashboard/src/components/forms/Button.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from "react"
 
 interface ButtonProps {
   icon?: ReactNode
-  variant?: 'danger'
+  variant?: 'danger' | 'success'
   onClick: () => void
   isLoading?: boolean
   className?: string
@@ -11,7 +11,7 @@ interface ButtonProps {
 
 export function Button({ icon, variant, onClick, isLoading, className, children }: ButtonProps) {
   return (
-    <button className={`flex gap-3 items-center px-3 py-1 border rounded select-none ${variant === 'danger' ? 'text-red-900 bg-red-50 border-red-200 hover:border-red-300' : 'text-gray-900 bg-gray-50 border-gray-200 hover:border-gray-300'} ${isLoading ? 'cursor-not-allowed opacity-60' : ''} ${className}`} onClick={isLoading ? undefined : onClick} type="button">
+    <button className={`flex gap-3 items-center px-3 py-1 border rounded select-none ${variant === 'danger' ? 'text-red-900 bg-red-50 border-red-200 hover:border-red-300' : variant === 'success' ? 'text-green-900 bg-green-50 border-green-200 hover:border-green-300' : 'text-gray-900 bg-gray-50 border-gray-200 hover:border-gray-300'} ${isLoading ? 'cursor-not-allowed opacity-60' : ''} ${className}`} onClick={isLoading ? undefined : onClick} type="button">
       {icon}
       {children}
     </button>

diff --git a/apps/dashboard/src/components/icons/GitHubIcon.tsx b/apps/dashboard/src/components/icons/GitHubIcon.tsx
@@ -0,0 +1,7 @@
+import type { SVGProps } from "react";
+
+export function GitHubIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}><path d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" fill="currentColor" /></svg>
+  )
+}