feat: added styles

app/globals.css

@@ -31,3 +31,5 @@ body {
     text-wrap: balance;
   }
 }
+
+

app/layout.tsx

@@ -5,7 +5,7 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "VoiceFlow",
   description: "Generated by create next app",
 };
 

app/page.tsx

@@ -3,7 +3,14 @@ import TextReader from "@/components/TextReader";
 export default function Home() {
   return (
     <main>
-      <h1>Random Text Reader</h1>
+      <div className="text-center my-10">
+        <h1 className="text-[#4DE438] text-3xl font-extrabold tracking-tight mb-2 opacity-90">
+          Voice Flow
+        </h1>
+        <h3 className="text-lg text-gray-600 font-medium leading-relaxed">
+          An elegant reading experience. Just press play.
+        </h3>
+      </div>
       <TextReader />
     </main>
   );

components/TextReader.tsx

@@ -2,6 +2,7 @@
 
 import { Poppins } from 'next/font/google'
 import React, { useState } from 'react'
+import { textsarr } from '@/utils/data'
 
 const poppins = Poppins({
     subsets: ['latin'],
@@ -11,54 +12,151 @@ const poppins = Poppins({
 const TextReader = () => {
     const [randomText, setRandomText] = useState("");
     const [currentWordIndex, setCurrentWordIndex] = useState(0);
+    const [showPopup, setShowPopup] = useState(false);
+    const [inputText, setInputText] = useState("");
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [synth, setSynth] = useState<SpeechSynthesis | null>(null);
+    const [utterance, setUtterance] = useState<SpeechSynthesisUtterance | null>(null);
 
     const generateRandomText = () => {
-        const texts = [
-            "This is the first random text.",
-            "Here is another piece of random text.",
-            "Random text generation is fun!",
-        ];
+        const texts = textsarr;
+
         const randomIndex = Math.floor(Math.random() * texts.length);
         setRandomText(texts[randomIndex]);
         setCurrentWordIndex(0);
     }
 
     const readText = () => {
-        const words = randomText.split(" ");
-        const utterance = new SpeechSynthesisUtterance(randomText);
+        if (synth && utterance) {
+            synth.cancel();
+        }
 
-        utterance.onboundary = (event) => {
-            const {charIndex} = event;
+        const newUtterance = new SpeechSynthesisUtterance(randomText);
+        const newSynth = window.speechSynthesis;
+
+        newUtterance.onboundary = (event) => {
+            const { charIndex } = event;
             const wordsUntilCurrent = randomText.substring(0, charIndex).split(" ");
             setCurrentWordIndex(wordsUntilCurrent.length - 1);
         }
 
-        utterance.onend = () => {
-            setCurrentWordIndex(words.length);
+        newUtterance.onend = () => {
+            setCurrentWordIndex(randomText.split(" ").length);
+            setIsPlaying(false);
         }
 
-        window.speechSynthesis.speak(utterance);
+        newSynth.speak(newUtterance);
+        setSynth(newSynth);
+        setUtterance(newUtterance);
+        setIsPlaying(true);
     }
 
-    return (
+    const pausePlayback = () => {
+        if (synth) {
+            synth.pause();
+            setIsPlaying(false);
+        }
+    }
 
-        <div className={`m-5 ${poppins.className}`}>
-            <button onClick={generateRandomText}>Generate Random Text</button>
-            {randomText && (
-                <div className="my-5 text-lg">
-                    {randomText.split(" ").map((word, index) => (
-                        <span
-                            key={index}
-                            className={`mr-1 ${index === currentWordIndex ? 'bg-yellow-400' : 'bg-transparent'}`}
+    const resumePlayback = () => {
+        if (synth && utterance) {
+            synth.resume();
+            setIsPlaying(true);
+        }
+    }
+
+    const handleAddText = () => {
+        setRandomText(inputText);
+        setCurrentWordIndex(0);
+        setShowPopup(false);
+    }
+
+    return (
+        <div className={`m-5 ${poppins.className} flex flex-col items-center justify-center`}>
+            <div className='border w-full max-w-[600px] p-6 md:p-10 rounded-2xl border-gray-500 shadow-lg md:max-w-[1000px]'>
+                {randomText && (
+                    <div className="my-5 text-lg w-full leading-8 text-center break-words">
+                        {randomText.split(" ").map((word, index) => (
+                            <span
+                                key={index}
+                                className={`mr-1 ${index === currentWordIndex ? 'text-[#4DE438]' : 'text-gray-600'}`}
+                            >
+                                {word}
+                            </span>
+                        ))}
+                    </div>
+                )}
+            </div>
+            <div className="flex flex-wrap justify-center space-x-4 mt-8">
+                <button
+                    onClick={generateRandomText}
+                    className="bg-gray-800 text-white px-6 py-2 rounded-full hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-[#4DE438] transition duration-200"
+                >
+                    Generate Random Text
+                </button>
+                <button
+                    onClick={() => {
+                        setInputText('')
+                        setShowPopup(true)
+                    }}
+                    className="bg-gray-800 text-white px-6 py-2 rounded-full hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-[#4DE438] transition duration-200"
+                >
+                    Add your own
+                </button>
+                {randomText && (
+                    <>
+                        <button
+                            onClick={readText}
+                            className="bg-[#4DE438] text-gray-800 px-6 py-2 rounded-full hover:bg-[#3ac02f] focus:outline-none focus:ring-2 focus:ring-gray-800 transition duration-200"
+                        >
+                            Play
+                        </button>
+                        <button
+                            onClick={pausePlayback}
+                            className="bg-yellow-500 text-gray-800 px-6 py-2 rounded-full hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-gray-800 transition duration-200"
+                        >
+                            Pause
+                        </button>
+                        <button
+                            onClick={resumePlayback}
+                            className="bg-blue-500 text-white px-6 py-2 rounded-full hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-gray-800 transition duration-200"
                         >
-                            {word}
-                        </span>
-                    ))}
+                            Resume
+                        </button>
+                    </>
+                )}
+            </div>
+
+            {showPopup && (
+                <div className="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50">
+                    <div className="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md">
+                        <h2 className="text-lg font-bold mb-4 text-white">Enter Text to Read</h2>
+                        <textarea
+                            rows={4}
+                            value={inputText}
+                            onChange={(e) => setInputText(e.target.value)}
+                            className="w-full p-2 border rounded-lg mb-4 bg-gray-700 text-white placeholder-gray-400"
+                            placeholder="Type your text here..."
+                        />
+                        <div className="flex justify-end space-x-4">
+                            <button
+                                onClick={handleAddText}
+                                className="bg-[#4DE438] text-gray-800 px-4 py-2 rounded-full hover:bg-[#3ac02f] focus:outline-none focus:ring-2 focus:ring-[#4DE438] transition duration-200"
+                            >
+                                Add Text
+                            </button>
+                            <button
+                                onClick={() => setShowPopup(false)}
+                                className="bg-gray-700 text-white px-4 py-2 rounded-full hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-800 transition duration-200"
+                            >
+                                Cancel
+                            </button>
+                        </div>
+                    </div>
                 </div>
             )}
-            {randomText && <button onClick={readText}>Play</button>}
         </div>
     )
 }
 
-export default TextReader
+export default TextReader

package.json

@@ -9,18 +9,18 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.2.6",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.6"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.6",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.6"
+    "typescript": "^5"
   }
 }

utils/data.ts

@@ -0,0 +1,41 @@
+export const textsarr = [
+    "Embrace every challenge with enthusiasm, knowing that every obstacle you overcome is a step closer to your goals. The journey of growth is not easy, but it is incredibly rewarding and will shape you into a stronger individual.",
+    "In the world of technology, innovation is the heartbeat of progress. Continuously push the boundaries of what’s possible and don’t settle for the status quo. The future belongs to those who are bold enough to create it.",
+    "Success is not a destination but a journey. It’s a continuous process of learning, growing, and evolving. Remember, failure is simply a stepping stone to success. The key is to have the courage to keep moving forward despite the setbacks.",
+    "Staying curious is crucial in the tech industry. Technology is constantly evolving, and being open to new ideas and learning opportunities will keep you ahead of the curve and ensure that you’re always at the forefront of innovation.",
+    "Dream big and work tirelessly towards your goals. Surround yourself with positive influences and people who uplift you. Achieving greatness requires dedication, resilience, and the support of a strong network.",
+    "Each line of code you write contributes to a larger picture. Strive for efficiency and elegance in your coding practices, and remember that even the smallest improvements can have a significant impact on the overall project.",
+    "Perseverance is a powerful force. Believe in your potential and in the transformative power of your ideas. With hard work and determination, you can achieve extraordinary things and make a lasting impact on the world.",
+    "Approach your coding projects with passion and purpose. The solutions you create have the potential to change lives and make a difference. Let your enthusiasm drive you to push boundaries and innovate.",
+    "Our doubts and fears often hold us back from achieving our dreams. Overcome these limitations by focusing on your strengths and taking actionable steps towards your goals. The future is shaped by those who believe in their own potential.",
+    "Simplicity is a hallmark of sophistication in technology. Strive to create solutions that are not only functional but also elegant and easy to understand. This approach will lead to more sustainable and maintainable innovations.",
+    "Growth happens outside of your comfort zone. Embrace new experiences and challenges as opportunities for development. By pushing yourself beyond familiar boundaries, you’ll discover new capabilities and strengths.",
+    "Data is a powerful resource that drives decision-making and innovation. Learn to analyze and interpret data effectively to uncover insights that can lead to breakthrough ideas and strategic advancements.",
+    "Success is not about achieving fame or wealth; it’s about being valuable and making a positive impact on others. Focus on contributing to your community and creating value through your work and actions.",
+    "Every bug you fix and every problem you solve is a step towards mastery. Celebrate these victories and use them as motivation to continue improving and striving for excellence in your craft.",
+    "Opportunities are not handed to us; we create them through hard work, creativity, and determination. Take initiative and actively seek out chances to grow and succeed in your endeavors.",
+    "Efficiency in programming is not just about speed; it’s about writing clean, maintainable, and effective code. Aim to create solutions that are both practical and elegant, and your work will stand out.",
+    "The effort you put into your goals directly impacts the sense of achievement you will feel. The more you invest in your aspirations, the more fulfilling the outcome will be. Keep pushing forward with dedication and perseverance.",
+    "Success is a result of consistent effort and dedication. By making small, incremental improvements every day, you will build a solid foundation for achieving your long-term goals and ambitions.",
+    "In the ever-evolving world of technology, staying informed and adaptable is key. Continuously educate yourself and embrace new tools and techniques to stay ahead in a competitive and rapidly changing field.",
+    "Your imagination is the only limit to what you can achieve. Use your creativity and vision to push boundaries and explore new possibilities. The world is full of opportunities waiting for you to seize them.",
+    "The process of coding is a journey of discovery and problem-solving. Each project presents unique challenges that will test your skills and expand your knowledge. Embrace this journey with enthusiasm and curiosity.",
+    "Great achievements come from stepping out of your comfort zone and taking risks. Don’t be afraid to pursue your dreams and explore new paths. It’s through these bold actions that you’ll find true success and fulfillment.",
+    "The art of programming lies in translating complex problems into elegant solutions. Focus on creating code that is not only functional but also well-structured and easy to understand. This approach will enhance the quality of your work.",
+    "Loving what you do is the secret to doing great work. When you are passionate about your projects, you will find joy and motivation in every aspect of your work, leading to exceptional results and personal satisfaction.",
+    "Making data-driven decisions allows you to leverage insights for better outcomes. Use data to inform your strategies and innovations, ensuring that your solutions are effective and aligned with your goals.",
+    "Success is measured not by how high you climb, but by how much you contribute to the success and well-being of others. Focus on making a positive difference in the lives of those around you, and success will follow.",
+    "Coding with enthusiasm and purpose will inspire others and lead to impactful solutions. Let your passion drive you to create innovations that make a difference and set new standards in your field.",
+    "Time waits for no one. Stay focused and keep moving forward with determination. The more you invest in your goals, the closer you will get to achieving them. Make the most of every moment and keep striving for excellence.",
+    "Curiosity is a powerful driver of progress in technology. Embrace the unknown and let your desire to learn lead you to new discoveries and breakthroughs. The journey of exploration is where innovation begins.",
+    "Achievement comes to those who are actively seeking it. Instead of waiting for success to find you, take proactive steps to create opportunities and work towards your goals with intention and dedication.",
+    "In programming, as in life, the process of growth and development is ongoing. Continuously seek out new learning experiences and challenges to refine your skills and achieve greater heights in your career.",
+    "Success is a result of consistent, focused effort. By maintaining a strong work ethic and dedication to your goals, you’ll build a foundation for long-term success and personal fulfillment.",
+    "The path to greatness is paved with perseverance and hard work. Embrace the journey with resilience and determination, and you will find that your efforts lead to extraordinary achievements and growth.",
+    "Code is more than just a set of instructions; it’s a reflection of your creativity and problem-solving skills. Approach each project with a mindset of innovation and craftsmanship to produce high-quality work.",
+    "Every challenge you face is an opportunity for growth. Embrace these moments with a positive attitude and a willingness to learn, and you’ll find that each experience contributes to your overall development.",
+    "Building something of value requires dedication and passion. Focus on creating solutions that address real needs and have a meaningful impact, and your work will be recognized and appreciated by others.",
+    "The key to success lies in continuous learning and adaptation. Stay curious and open to new ideas, and you’ll find that your ability to innovate and excel grows with each new experience and challenge.",
+    "Programming is a discipline that rewards those who are persistent and detail-oriented. Pay attention to the nuances of your code and strive for excellence in every aspect of your work to achieve outstanding results.",
+    "Your potential is limitless. Set ambitious goals and take proactive steps to achieve them. With dedication, hard work, and a positive mindset, you can overcome any obstacle and reach new heights of success."
+];