From 4e1fcc7819aa3150dc5c08e6b38839aa3cbc6b72 Mon Sep 17 00:00:00 2001
From: asmyshlyaev177 <asmyshlyaev177+github@gmail.com>
Date: Tue, 26 Nov 2024 20:41:32 +0400
Subject: [PATCH] style: minor style changes

---
 .../src/app/(demo)/CodeBlocksNext.tsx         |  2 +-
 .../src/app/(demo)/TabsBlock.tsx              | 10 +++++++
 .../example-nextjs14/src/app/(demo)/page.tsx  |  4 +--
 .../app/(demo)/react-router/CodeBlocksRR.tsx  |  2 +-
 .../src/app/(demo)/react-router/page.tsx      |  4 +--
 .../example-nextjs14/src/app/DemoPart.tsx     |  3 ++
 .../src/app/components/UrlBox.tsx             |  2 +-
 packages/shared/styles.css                    | 12 ++++++--
 packages/shared/tailwind.ts                   | 29 +++++++++++++++++++
 9 files changed, 58 insertions(+), 10 deletions(-)
 create mode 100644 packages/example-nextjs14/src/app/(demo)/TabsBlock.tsx

diff --git a/packages/example-nextjs14/src/app/(demo)/CodeBlocksNext.tsx b/packages/example-nextjs14/src/app/(demo)/CodeBlocksNext.tsx
index b7e27467..62a88142 100644
--- a/packages/example-nextjs14/src/app/(demo)/CodeBlocksNext.tsx
+++ b/packages/example-nextjs14/src/app/(demo)/CodeBlocksNext.tsx
@@ -7,7 +7,7 @@ import { tooltips } from './tooltips';
 export const CodeBlocks = () => {
   return (
     <div className="flex flex-col gap-4">
-      <h2 className='text-3xl text-center' >Quick start</h2>
+      <h3 className='text-3xl text-center' >Quick start</h3>
       <div className="codeTitle">
         1. Define the state
       </div>
diff --git a/packages/example-nextjs14/src/app/(demo)/TabsBlock.tsx b/packages/example-nextjs14/src/app/(demo)/TabsBlock.tsx
new file mode 100644
index 00000000..530aa7e1
--- /dev/null
+++ b/packages/example-nextjs14/src/app/(demo)/TabsBlock.tsx
@@ -0,0 +1,10 @@
+import { Tabs } from "../components/Tabs"
+
+export const TabsBlock = () => {
+  return (
+    <>
+      <h2 className='text-2xl mt-12 mb-3 text-center'>Instructions for:</h2>
+        <Tabs className="sticky top-1" />
+    </>
+  )
+}
diff --git a/packages/example-nextjs14/src/app/(demo)/page.tsx b/packages/example-nextjs14/src/app/(demo)/page.tsx
index 697f01df..bcee7a76 100644
--- a/packages/example-nextjs14/src/app/(demo)/page.tsx
+++ b/packages/example-nextjs14/src/app/(demo)/page.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { DemoPart } from '../DemoPart';
 import { Description } from '../components/Description';
-import { Tabs } from '../components/Tabs';
+import { TabsBlock } from './TabsBlock';
 
 const CodeBlocks = dynamicImport(
   () => import('./CodeBlocksNext')
@@ -18,7 +18,7 @@ export default async function Home({ searchParams }: { searchParams: object }) {
     <>
       <DemoPart searchParams={searchParams} />
 
-      <Tabs className="sticky top-1 mt-12" />
+      <TabsBlock />
 
       <section className="codeBlock-wrapper">
         <CodeBlocks />
diff --git a/packages/example-nextjs14/src/app/(demo)/react-router/CodeBlocksRR.tsx b/packages/example-nextjs14/src/app/(demo)/react-router/CodeBlocksRR.tsx
index 552459d6..136dcdbd 100644
--- a/packages/example-nextjs14/src/app/(demo)/react-router/CodeBlocksRR.tsx
+++ b/packages/example-nextjs14/src/app/(demo)/react-router/CodeBlocksRR.tsx
@@ -7,7 +7,7 @@ import { tooltips } from '../tooltips';
 export const CodeBlocksRR = () => {
   return (
     <div className="flex flex-col gap-4">
-      <h2 className='text-3xl text-center' >Quick start</h2>
+      <h3 className='text-3xl text-center' >Quick start</h3>
       <div className="codeTitle">
         1. Define the state
       </div>
diff --git a/packages/example-nextjs14/src/app/(demo)/react-router/page.tsx b/packages/example-nextjs14/src/app/(demo)/react-router/page.tsx
index 0391b898..a77b8f8a 100644
--- a/packages/example-nextjs14/src/app/(demo)/react-router/page.tsx
+++ b/packages/example-nextjs14/src/app/(demo)/react-router/page.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { DemoPart } from '../../DemoPart';
 import { Description } from '../../components/Description';
-import { Tabs } from '../../components/Tabs';
+import { TabsBlock } from '../TabsBlock';
 
 const CodeBlocks = dynamicImport(
   () => import('./CodeBlocksRR').then((mod) => mod.CodeBlocksRR),
@@ -17,7 +17,7 @@ export default async function Home({ searchParams }: { searchParams: object }) {
     <>
       <DemoPart searchParams={searchParams}/>
 
-      <Tabs className="sticky top-1 mt-12" />
+      <TabsBlock />
 
       <section className="codeBlock-wrapper">
         <CodeBlocks />
diff --git a/packages/example-nextjs14/src/app/DemoPart.tsx b/packages/example-nextjs14/src/app/DemoPart.tsx
index 365e3cf7..f11c8029 100644
--- a/packages/example-nextjs14/src/app/DemoPart.tsx
+++ b/packages/example-nextjs14/src/app/DemoPart.tsx
@@ -36,6 +36,9 @@ export function DemoPart({ searchParams }: { searchParams: object }) {
           <div className="urlBox">
             <UrlBox />
           </div>
+
+          <div className="relative w-[max-content] font-mono before:absolute before:inset-0 before:animate-typewriter before:bg-white after:absolute after:inset-0 after:w-[0.125em] after:animate-caret after:bg-black">Type something in a form, changes reflected in URL and state instantly.</div>
+
         </header>
 
         <section className="form-components">
diff --git a/packages/example-nextjs14/src/app/components/UrlBox.tsx b/packages/example-nextjs14/src/app/components/UrlBox.tsx
index 37a32b89..06218d8e 100644
--- a/packages/example-nextjs14/src/app/components/UrlBox.tsx
+++ b/packages/example-nextjs14/src/app/components/UrlBox.tsx
@@ -13,7 +13,7 @@ export const UrlBox = () => {
   }, [sp]);
 
   return (
-    <form>
+    <form className='outline-none focus-visible:outline-none'>
       <input
         id="url"
         readOnly
diff --git a/packages/shared/styles.css b/packages/shared/styles.css
index a01fc71c..70b825d7 100644
--- a/packages/shared/styles.css
+++ b/packages/shared/styles.css
@@ -37,11 +37,10 @@
 @layer components {
   .page-main {
     @apply text-black;
-    @apply bg-gradient-to-b
-     from-orange-200 to-orange-400 p-4;
+    @apply bg-gradient-to-b from-orange-200 to-orange-400 p-4;
 
     & > .wrapper {
-      @apply flex flex-col items-center container ml-auto mr-auto  bg-gradient-to-t from-stone-50 to-white w-full p-2 py-8  xl:max-w-[1100px] lg:px-[4em] rounded-lg lg:pt-6;
+      @apply flex flex-col items-center container ml-auto mr-auto bg-gradient-to-t from-stone-50 to-white w-full p-2 py-8  xl:max-w-[1100px] lg:px-[4em] rounded-lg lg:pt-6;
 
       & > .header {
         @apply min-h-[35vh] md:min-h-[25vh] flex flex-col items-center mb-8;
@@ -95,6 +94,13 @@
 
           .urlBox {
             @apply my-3;
+
+            & input {
+              border: 1px solid gray;
+              box-shadow: none;
+              outline: none;
+              cursor: default;
+            }
           }
         }
 
diff --git a/packages/shared/tailwind.ts b/packages/shared/tailwind.ts
index 64787098..b9238388 100644
--- a/packages/shared/tailwind.ts
+++ b/packages/shared/tailwind.ts
@@ -6,6 +6,35 @@ export const sharedConfig: Partial<Config> = {
       fontFamily: {
         sans: ["var(--font-roboto)", "Helvetica", "Arial", "sans-serif"],
       },
+
+      animation: {
+        typewriter: "typewriter 6s steps(30) forwards",
+        caret: "typewriter 6s steps(30) forwards, blink 1s steps(11) 10 2s",
+      },
+      keyframes: {
+        typewriter: {
+          to: {
+            left: "100%",
+          },
+        },
+        blink: {
+          "0%": {
+            opacity: "0",
+          },
+          "0.1%": {
+            opacity: "1",
+          },
+          "50%": {
+            opacity: "1",
+          },
+          "50.1%": {
+            opacity: "0",
+          },
+          "100%": {
+            opacity: "0",
+          },
+        },
+      },
     },
   },
 };