typewriter

1"use client"
2 
3import { ReactNode } from "react"
4 
5import { Typewriter } from "../ui/typewriter"
6 
7const texts = [
8  "Testing 124",
9  "Look at newcult.co",
10  "and check gnow.io",
11  "Sick af",
12]
13 
14export function TypewriterDemo() {
15  return (
16    <IosOgShellCard>
17      <div className="ml-auto px-4 py-2 mb-3 text-white bg-blue-500 rounded-2xl">
18        <p className="text-sm md:text-base font-semibold text-base-900 truncate">
19          <Typewriter texts={texts} delay={1} baseText="Yo " />
20        </p>
21      </div>
22    </IosOgShellCard>
23  )
24}
25 
26function IosOgShellCard({ children }: { children: ReactNode }) {
27  return (
28    <div className="max-w-xs md:max-w-xl md:min-w-80 mx-auto flex flex-col rounded-lg bg-neutral-900 px-px pb-px shadow-inner-shadow">
29      <div className="p-4 flex flex-col md:px-5">
30        <div className="mb-2 text-sm md:text-neutral-500 text-neutral-500">
31          iMessage
32        </div>
33        <div className="mb-3 text-xs md:text-sm text-neutral-500">
34          Today 11:29
35        </div>
36        <div className="ml-auto px-4 py-2 mb-3 text-white bg-blue-500 rounded-2xl">
37          <span>Hey!</span>
38        </div>
39        <div className="mr-auto px-4 py-2 mb-3 text-white bg-neutral-700 rounded-2xl">
40          <span>Whats up bretheren?!</span>
41        </div>
42        {children}
43        <div className="mt-3 text-xs md:text-sm text-neutral-500">
44          Delivered
45        </div>
46      </div>
47    </div>
48  )
49}