feat: implement streak sharing functionality with ShareStreakCard and ShareOptionsSheet components

Author: chibokaxavier

frontend/app/streak/page.tsx

@@ -162,7 +162,7 @@ const StreakCalendar: React.FC<StreakCalendarProps> = ({
                 <div className="flex items-center justify-between mb-[20px]">
                     <button
                         onClick={handlePreviousMonth}
-                        className="p-2 rounded-lg hover:bg-[#FACC15]/10 transition-colors"
+                        className="p-2 rounded-lg hover:bg-[#FACC15]/10 transition-colors cursor-pointer"
                         aria-label="Previous month"
                     >
                         <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="text-[#FACC15]">
@@ -175,7 +175,7 @@ const StreakCalendar: React.FC<StreakCalendarProps> = ({
                     </h2>
                     <button
                         onClick={handleNextMonth}
-                        className="p-2 rounded-lg hover:bg-[#FACC15]/10 transition-colors"
+                        className="p-2 rounded-lg hover:bg-[#FACC15]/10 transition-colors cursor-pointer"
                         aria-label="Next month"
                     >
                         <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="text-[#FACC15]">
@@ -333,7 +333,8 @@ const DEMO_STREAK_DATA: StreakData = (() => {
 
 export default function StreakPage() {
     const router = useRouter();
-    const [showShare, setShowShare] = useState(false);
+    const [showShareCard, setShowShareCard] = useState(false);
+    const [showShareSheet, setShowShareSheet] = useState(false);
 
     const streakCount = 4;
     const points = 1100;
@@ -344,15 +345,15 @@ export default function StreakPage() {
             <StreakNavbar
                 streakCount={streakCount}
                 points={points}
-                onShare={() => setShowShare(true)}
+                onShare={() => setShowShareCard(true)}
                 onClose={() => router.push("/dashboard")}
             />
 
             {/* Page Header */}
             <div className="w-full flex items-center justify-between px-[16px] md:px-8 pt-6 pb-2 max-w-[700px] mx-auto">
                 <button
                     onClick={() => router.push("/dashboard")}
-                    className="p-2 rounded-lg text-white/60 hover:text-white transition-colors"
+                    className="p-2 rounded-lg text-white/60 hover:text-white transition-colors cursor-pointer"
                     aria-label="Close"
                 >
                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
@@ -361,8 +362,8 @@ export default function StreakPage() {
                 </button>
                 <h1 className="font-nunito font-bold text-white text-lg tracking-wide">Streak</h1>
                 <button
-                    onClick={() => setShowShare(true)}
-                    className="p-2 rounded-lg text-white/60 hover:text-white transition-colors"
+                    onClick={() => setShowShareCard(true)}
+                    className="p-2 rounded-lg text-white/60 hover:text-white transition-colors cursor-pointer"
                     aria-label="Share"
                 >
                     <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
@@ -401,8 +402,8 @@ export default function StreakPage() {
 
             {/* Share Options Sheet */}
             <ShareOptionsSheet
-                isOpen={showShare}
-                onClose={() => setShowShare(false)}
+                isOpen={showShareSheet}
+                onClose={() => setShowShareSheet(false)}
                 onShare={(platform) => {
                     console.log(`Sharing streak to ${platform}`);
                     // Handle sharing logic here
@@ -448,10 +449,14 @@ export default function StreakPage() {
                 }}
             />
             {/* Share Modal */}
-            {showShare && (
+            {showShareCard && (
                 <ShareStreakCard
                     streakCount={streakCount}
-                    onClose={() => setShowShare(false)}
+                    onClose={() => setShowShareCard(false)}
+                    onShare={() => {
+                        setShowShareCard(false);
+                        setShowShareSheet(true);
+                    }}
                 />
             )}
         </div>

frontend/components/ShareOptionsSheet.tsx

@@ -77,6 +77,27 @@ const ShareOptionsSheet: React.FC<ShareOptionsSheetProps> = ({
     };
   }, [isOpen, onClose]);
 
+  const handleTabKey = (event: React.KeyboardEvent) => {
+    if (event.key !== 'Tab' || !sheetRef.current) return;
+
+    const focusable = sheetRef.current.querySelectorAll<HTMLElement>(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+
+    if (focusable.length === 0) return;
+
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
   // Prevent body scroll when sheet is open
   useEffect(() => {
     if (isOpen) {
@@ -101,7 +122,7 @@ const ShareOptionsSheet: React.FC<ShareOptionsSheetProps> = ({
     <div className="fixed inset-0 z-50 flex flex-col justify-end">
       {/* Backdrop */}
       <div 
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-pointer"
         onClick={onClose}
         aria-label="Close share options"
       />
@@ -113,12 +134,13 @@ const ShareOptionsSheet: React.FC<ShareOptionsSheetProps> = ({
         role="dialog"
         aria-modal="true"
         aria-labelledby="share-sheet-title"
+        onKeyDown={handleTabKey}
       >
         {/* Header */}
         <div className="flex items-center justify-between mb-6">
           <Button
             onClick={onClose}
-            className="w-8 h-8 flex items-center justify-center text-white/60 hover:text-white transition-colors bg-transparent p-0"
+            className="w-8 h-8 flex items-center justify-center text-white/60 hover:text-white transition-colors bg-transparent p-0 cursor-pointer"
             aria-label="Close share options"
           >
             <svg 
@@ -153,7 +175,7 @@ const ShareOptionsSheet: React.FC<ShareOptionsSheetProps> = ({
             <button
               key={option.id}
               onClick={() => handleShare(option.id)}
-              className="flex flex-col items-center gap-2 group focus:outline-none focus:ring-2 focus:ring-blue-500/50 rounded-lg p-2 transition-all duration-200"
+              className="flex flex-col items-center gap-2 group focus:outline-none focus:ring-2 focus:ring-blue-500/50 rounded-lg p-2 transition-all duration-200 cursor-pointer"
               aria-label={`Share via ${option.label}`}
             >
               {/* Circular Icon Button */}