[#1] No animated text

scripts/seed.ts

@@ -3,8 +3,6 @@ import { db } from 'api/src/lib/db'
 
 import { hashPassword } from '@redwoodjs/auth-dbauth-api'
 
-const MAX_TITLES = 5
-
 export default async () => {
   try {
     const admin = {
@@ -44,9 +42,7 @@ export default async () => {
     if (!titles)
       await db.titles.create({
         data: {
-          titles: Array.from({ length: MAX_TITLES }).map(
+          titles: Array.from({ length: 3 }).map((_, i) => `title ${i + 1}`),
-            (_, i) => `a title ${i + 1}`
-          ),
         },
       })
   } catch (error) {

web/package.json

@@ -41,8 +41,7 @@
     "react": "18.3.1",
     "react-colorful": "^5.6.1",
     "react-dom": "18.3.1",
-    "react-html-parser": "^2.0.2",
+    "react-html-parser": "^2.0.2"
-    "react-typed": "^2.0.12"
   },
   "devDependencies": {
     "@redwoodjs/vite": "8.4.0",

web/src/components/Title/Titles/Titles.tsx

@@ -1,38 +1,28 @@
-import { ReactTyped } from 'react-typed'
-
 interface TitlesProps {
   titles: string[]
   className?: string
 }
 
-export const Titles = ({ titles, className }: TitlesProps) => {
+export const Titles = ({ titles }: TitlesProps) => {
   const titlesFiltered = titles.filter((title) => title !== '')
 
   return (
     <>
-      <h1 className="text-3xl sm:text-5xl font-bold">
+      {titlesFiltered.length >= 3 && (
-        Hey 👋, I&apos;m {`${process.env.FIRST_NAME}`}
+        <div className="flex flex-col sm:flex-row gap-4 sm:gap-0 justify-center items-center">
-        {titlesFiltered.length > 0 && (
+          <span className="badge badge-lg badge-ghost">
-          <>
+            {titlesFiltered[0]}
-            , <br />
+          </span>
-            <ReactTyped
+          <div className="hidden sm:divider sm:divider-horizontal" />
-              className={className}
+          <span className="badge badge-lg badge-ghost">
-              strings={titlesFiltered}
+            {titlesFiltered[1]}
-              typeSpeed={50}
+          </span>
-              backSpeed={40}
+          <div className="hidden sm:divider sm:divider-horizontal" />
-              backDelay={1000}
+          <span className="badge badge-lg badge-ghost">
-              startWhenVisible
+            {titlesFiltered[2]}
-              loop
+          </span>
-              onStringTyped={(pos, self) => {
+        </div>
-                if (pos === 0) {
+      )}
-                  self.stop()
-                  setTimeout(() => self.start(), 2500)
-                }
-              }}
-            />
-          </>
-        )}
-      </h1>
     </>
   )
 }

web/src/components/Title/TitlesForm/TitlesForm.tsx

@@ -8,8 +8,6 @@ import { Form, Label, Submit, TextField } from '@redwoodjs/forms'
 import { TypedDocumentNode, useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 
-const MAX_TITLES = 5
-
 interface TitlesFormProps {
   titles?: Titles
 }
@@ -25,14 +23,10 @@ const UPDATE_TITLES_MUTATION: TypedDocumentNode<UpdateTitlesInput> = gql`
 const TitlesForm = ({ titles }: TitlesFormProps) => {
   const title1ref = useRef<HTMLInputElement>(null)
 
-  const [preview, setPreview] = useState<boolean>(false)
-
   const states = [
     useState<string>(titles?.titles[0]),
     useState<string>(titles?.titles[1]),
     useState<string>(titles?.titles[2]),
-    useState<string>(titles?.titles[3]),
-    useState<string>(titles?.titles[4]),
   ]
 
   useEffect(() => title1ref.current?.focus(), [])
@@ -56,10 +50,7 @@ const TitlesForm = ({ titles }: TitlesFormProps) => {
 
   return (
     <Form onSubmit={onSubmit} className="space-y-2">
-      <p className="text-center opacity-70">
+      {Array.from({ length: 3 }).map((_, i) => (
-        The first title gets displayed for longer
-      </p>
-      {Array.from({ length: MAX_TITLES }).map((_, i) => (
         <Label key={i} name={`title${i}`} className="form-control w-full">
           <Label
             name={`title${i}`}
@@ -83,25 +74,24 @@ const TitlesForm = ({ titles }: TitlesFormProps) => {
               className="w-full"
             />
           </Label>
-          {preview && (
-            <div className="label">
-              <p>
-                Hey 👋, I&apos;m {`${process.env.FIRST_NAME}`},{' '}
-                <span className="text-primary">{states[i][0]}</span>
-              </p>
-            </div>
-          )}
         </Label>
       ))}
 
+      <div className="flex flex-col sm:flex-row gap-4 sm:gap-0 justify-center items-center py-2">
+        <span className="badge badge-lg badge-ghost whitespace-nowrap">
+          {states[0][0]}
+        </span>
+        <div className="hidden sm:divider sm:divider-horizontal" />
+        <span className="badge badge-lg badge-ghost whitespace-nowrap">
+          {states[1][0]}
+        </span>
+        <div className="hidden sm:divider sm:divider-horizontal" />
+        <span className="badge badge-lg badge-ghost whitespace-nowrap">
+          {states[2][0]}
+        </span>
+      </div>
+
       <nav className="my-2 flex justify-center space-x-2">
-        <button
-          type="button"
-          className="btn btn-sm uppercase"
-          onClick={() => setPreview(!preview)}
-        >
-          {preview ? 'Hide' : 'Show'} Preview
-        </button>
         <Submit
           disabled={updateLoading}
           className="btn btn-primary btn-sm uppercase"

web/src/pages/HomePage/HomePage.tsx

@@ -24,7 +24,10 @@ const HomePage = () => (
     <div className="hero min-h-[calc(100vh-6rem)]">
       <div className="hero-content flex flex-col gap-8">
         <div className="flex flex-col text-center gap-8">
-          <TitlesCell className="text-primary" />
+          <h1 className="text-3xl sm:text-5xl font-bold">
+            Hey 👋, I&apos;m {`${process.env.FIRST_NAME}`}
+          </h1>
+          <TitlesCell />
           <h3 className="text-xl">
             📍{' '}
             {[

yarn.lock

@@ -16603,17 +16603,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-typed@npm:^2.0.12":
-  version: 2.0.12
-  resolution: "react-typed@npm:2.0.12"
-  dependencies:
-    typed.js: "npm:^2.1.0"
-  peerDependencies:
-    react: ">16.8.0"
-  checksum: 10c0/31b0cb66c0245e74058f17a8a6d7496af51a3964a4a4af888312992883833090e0b1d4a0afb91c2ef1c93d3d1d476ad79ff5e9c44f7acfd24f3c75c634e2155e
-  languageName: node
-  linkType: hard
-
 "react@npm:18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
@@ -18699,13 +18688,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed.js@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "typed.js@npm:2.1.0"
-  checksum: 10c0/a85339064b0d96d01622ea4729436a36172aa0b634cf8e07c1735a5dd50bb35e92b97db412c307fa3364dc2c106efbf9ab7a0bd47a5268f5f7034b4a5effdab2
-  languageName: node
-  linkType: hard
-
 "typescript@npm:5.6.2":
   version: 5.6.2
   resolution: "typescript@npm:5.6.2"
@@ -19252,7 +19234,6 @@ __metadata:
     react-colorful: "npm:^5.6.1"
     react-dom: "npm:18.3.1"
     react-html-parser: "npm:^2.0.2"
-    react-typed: "npm:^2.0.12"
     tailwindcss: "npm:^3.4.8"
   languageName: unknown
   linkType: soft