style: style improvement

asmyshlyaev177 · Jul 17, 2024 · 96c667a · 96c667a
1 parent b53fa2a
commit 96c667a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 21 deletions.
diff --git a/packages/example-nextjs/src/app/Logo.tsx b/packages/example-nextjs/src/app/Logo.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+export const Logo = (props: { className: string }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" {...props}>
+    <path
+      fill="#EFEFEF"
+      d="M97.105 9.84c24.58-.97 47.12 9.12 65.2 25.21 17.05 16.14 26.57 38.29 27.67 61.59.62 24.09-7.75 46.56-23.98 64.36-.62.71-1.24 1.41-1.89 2.14-14.9 15.94-37.35 25.86-59.11 26.86-.69.05-1.38.1-2.09.16-14.58.6-28.83-2.96-41.91-9.16-.98-.46-1.97-.93-2.98-1.41-7.11-3.61-13.07-8.31-19.02-13.59-.71-.63-1.42-1.25-2.15-1.9-16.69-15.67-25.75-38.12-26.82-60.74-.62-24.09 7.75-46.57 23.97-64.36.69-.78 1.38-1.56 2.08-2.36 15.73-16.9 38.48-25.08 61.03-26.8Z"
+    />
+    <path
+      fill="#F8771D"
+      d="M59 49v9c-1.99.49-3.97.98-5.96 1.46-1.7.45-3.37.98-5.04 1.54-1.05 3.15-1.15 5.47-1.21 8.77-.04 1.7-.04 1.7-.09 3.44-.05 2.39-.09 4.78-.13 7.17-.2 7.32-.44 12.65-6.01 17.93-2.36 1.56-3.86 2.11-6.56 2.69.61.29 1.23.58 1.86.88l2.45 1.24c.8.4 1.6.79 2.43 1.2 3.16 2.35 3.97 3.91 5.26 7.68.45 4.37.51 8.73.56 13.12.04 2.34.08 4.68.13 7.01.01 1.03.03 2.06.04 3.12.27 2.78.78 4.42 2.27 6.75 3.1 2.1 6.33 2.5 10 3v9c-6.56.48-11.37-.51-17-4-4.28-3.79-6.77-8.28-7.26-13.98 0-1.08-.01-2.16-.01-3.27-.02-1.19-.04-2.37-.07-3.59-.02-2.49-.04-4.97-.05-7.45-.02-1.19-.05-2.37-.07-3.59l-.03-3.27c-.63-3.51-1.75-4.67-4.51-6.85-2.98-1.05-5.87-1.45-9-2v-9c1.4-.25 2.8-.5 4.25-.75 4.14-.73 6.09-1.97 8.75-5.25.58-2.86.58-2.86.47-6.02l.04-3.54c-.01-2.44-.01-4.89-.02-7.33.1-8.32.7-14.3 6.82-20.42C47.41 49.86 51.94 48.63 59 49ZM141 49c6.34-.55 11.42.93 17 4 4.34 3.68 6.77 8.33 7.26 13.98 0 1.62 0 1.62.01 3.27.02 1.19.04 2.37.07 3.59.02 2.49.04 4.97.05 7.45.02 1.19.05 2.37.07 3.59l.03 3.27c.63 3.51 1.75 4.67 4.51 6.85 2.98 1.05 5.87 1.45 9 2v9c-1.4.25-2.81.5-4.25.75-4.14.73-6.09 1.97-8.75 5.25-.58 2.86-.58 2.86-.47 6.02l-.04 3.54c.01 2.44.01 4.89.02 7.33-.1 8.32-.73 14.22-6.76 20.42-5.85 3.59-10.9 5.12-17.75 4.69v-9c.7-.17 1.4-.34 2.12-.52.91-.24 1.82-.48 2.76-.73l2.74-.7c2.45-.83 2.45-.83 3.51-2.75 1.07-2.83 1.13-5.14 1.14-8.17.02-1.13.04-2.26.07-3.43.02-2.38.04-4.75.05-7.13.22-10.85.22-10.85 4.61-15.57 1.92-1.64 3.81-2.71 6-4-.74-.56-1.49-1.11-2.25-1.69-3.62-3.04-6.24-5.79-7.75-10.31-.1-1.94-.15-3.89-.18-5.84-.02-1.15-.04-2.29-.07-3.47-.04-2.41-.07-4.83-.09-7.24l-.09-3.48c-.01-1.05-.02-2.1-.04-3.18-.66-3.45-1.82-4.62-4.53-6.79-2.1-.88-2.1-.88-4.25-1.25-1.24-.25-2.47-.49-3.75-.75v-9Z"
+    />
+    <path
+      fill="#8A9BA7"
+      d="M105.25 84.125c3.34 2.28 5.32 4.65 7.75 7.88-1.39 3.36-2.98 4.98-6 7l-2.06-2.94c-2.05-2.39-3.14-3.16-6.13-4.5-6.27.72-9.53 5.07-13.81 9.44-.93.91-1.87 1.82-2.83 2.75-5.9 5.15-5.9 5.15-8.42 12.12.09 3.06.09 3.06 1.19 5.5 2.87 2.26 5.06 2.41 8.67 2.3 3.1-.88 4.2-2.3 6.26-4.74 3.35-3.85 3.35-3.85 7.08-4.24 2.74.27 5.36.67 8.05 1.31-13.22 15.79-13.22 15.79-22.16 17.38-5.61.44-8.77-1.12-13.11-4.58-3.74-3.9-5.19-7.22-5.29-12.62-.05-.97-.09-1.95-.13-2.95 1.7-7.97 9.11-13.99 14.69-19.55.69-.7 1.37-1.4 2.08-2.12 7.25-7.26 14.01-10.96 24.17-7.44Z"
+    />
+    <path
+      fill="#8A9AA7"
+      d="M125.125 64c4.67 3.25 9.17 6.73 10.42 12.54.18 5.89-.97 10.49-4.94 15.07a180.86 180.86 0 0 1-5.04 4.95c-3.81 3.66-7.27 7.3-10.56 11.44-5.45 4-9.66 5.52-16.36 5.48-4.65-.85-7.79-3.82-10.64-7.48-.72-2.23-.72-2.23-1-4 1.98-1.65 3.95-3.3 6-5 1.1 1.53 2.21 3.06 3.32 4.59 2.53 2.12 4.4 2.35 7.68 2.41 2.82-1.54 2.82-1.54 5.37-3.94.95-.83 1.89-1.66 2.87-2.51 9.32-7.68 9.32-7.68 14-18.17-.17-2.53-.17-2.53-1.24-5.38-2.67-1.53-4.69-1.99-7.76-2.12-3.59 1.24-4.85 2.58-7.5 5.24-3.95 3.79-3.95 3.79-7.55 4.18-2.47-.27-4.79-.66-7.19-1.3 1.11-3.34 1.99-4.1 4.62-6.31.72-.61 1.43-1.22 2.17-1.84.73-.61 1.46-1.22 2.21-1.85 1.29-1.12 2.58-2.25 3.87-3.38 5.24-4.55 10.67-4.72 17.25-2.62Z"
+    />
+  </svg>
+);
diff --git a/packages/example-nextjs/src/app/page.tsx b/packages/example-nextjs/src/app/page.tsx
@@ -1,10 +1,9 @@
-import Image from 'next/image';
-
 import { GithubLink } from './components/GithubLink';
 import { Form } from './Form';
+import { Logo } from './Logo';
 import { Status } from './Status';
-import Logo from '../../../../assets/logo.svg';
 
+console.log({ type: typeof Logo, Logo });
 export default async function Home({ searchParams }: { searchParams: object }) {
   return (
     <main
@@ -15,25 +14,21 @@ export default async function Home({ searchParams }: { searchParams: object }) {
         <div className="flex flex-col items-center bg-stone-100 w-full p-2 lg:max-w-[80%] lg:p-[4em] rounded-lg lg:pt-6">
           <div className="text-center min-h-[35vh] md:min-h-[25vh] flex flex-col justify-center mb-8">
             <div className="flex flex-col md:flex-row items-center justify-center gap-1">
-              <Image
-                priority
-                src={Logo}
-                alt="state-in-url logo"
-                width="200"
-                height="200"
-              />
-              <div className="text-center md:text-left ml-4">
-                <h1 className="text-6xl font-semibold tracking-wide text-neutral-700  mb-2">
-                  State in url
-                </h1>
+              <div className="text-center md:text-left ml-4 flex flex-col items-center min-[800px]:items-left min-[800px]:flex-row gap-6">
+                <Logo className="relative block min-w-[200px] max-w-[200px] drop-shadow-xl hover:drop-shadow-2xl transition ease-in duration-150" />
 
-                <p className="text-2xl max-w-[700px] font-light text-neutral-700 mb-2">
-                  State management and deep links
-                </p>
-                <p className="text-3xl tracking-wide text-neutral-800 max-w-[700px] mt-2">
-                  Share complex state between unrelated React.js components and
-                  sync it to the URL
-                </p>
+                <div>
+                  <h1 className="text-6xl font-semibold tracking-wide text-neutral-700 mb-2 drop-shadow-sm">
+                    State in url
+                  </h1>
+                  <p className="text-2xl max-w-[700px] font-light text-neutral-700 mb-2 drop-shadow-sm">
+                    State management and deep links
+                  </p>
+                  <p className="text-3xl tracking-wide text-neutral-800 max-w-[700px] mt-2  drop-shadow-sm">
+                    Share complex state between unrelated React.js components
+                    and sync it to the URL
+                  </p>
+                </div>
               </div>
             </div>
           </div>