chore: add speak coming soon alert

src/components/Study/SpeakComingSoon.tsx

@@ -0,0 +1,38 @@
+import type { ComponentProps } from "react";
+import { MicIcon, XIcon } from "lucide-react";
+import { useLocalStorage } from "usehooks-ts";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+
+const SpeakComingSoon = ({ ...props }: ComponentProps<typeof Alert>) => {
+  const [dismissed, setDismissed] = useLocalStorage(
+    "englitune-speak-coming-soon",
+    false
+  );
+
+  return (
+    !dismissed && (
+      <Alert {...props}>
+        <MicIcon />
+        <AlertTitle className="space-x-1.5">
+          <span>Coming soon!</span>
+          <span>{"\u{1F680}"}</span>
+        </AlertTitle>
+        <AlertDescription>
+          AI-powered speak practice to boost your pronunciation.
+        </AlertDescription>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="absolute top-2 right-2"
+          onClick={() => setDismissed(true)}
+        >
+          <XIcon />
+          <span className="sr-only">Dismiss</span>
+        </Button>
+      </Alert>
+    )
+  );
+};
+
+export default SpeakComingSoon;

src/components/Study/index.tsx

@@ -9,6 +9,7 @@ import Header from "@/components/Study/Header";
 import Audio from "@/components/Audio";
 import Info from "@/components/Study/Info";
 import Transcript from "@/components/Study/Transcript";
+import SpeakComingSoon from "@/components/Study/SpeakComingSoon";
 import { getAudioUrl, translate } from "@/lib/utils";
 import useStudy from "@/hooks/useStudy";
 import useReviews from "@/hooks/useReviews";
@@ -71,6 +72,7 @@ const Study = () => {
           {entry.transcript}
         </Transcript>
       )}
+      <SpeakComingSoon />
     </Container>
   );
 };