style: minor style changes

asmyshlyaev177 · Nov 26, 2024 · 4e1fcc7 · 4e1fcc7
1 parent 297e971
commit 4e1fcc7
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",
+          },
+        },
+      },
     },
   },
 };