Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | import React from 'react'; export default function Notifications() { return ( <div className="min-h-screen bg-gray-50 dark:bg-gray-900"> <div className="max-w-4xl mx-auto px-4 py-8"> {/* Header */} <div className="mb-8"> <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2"> Notifications </h1> <p className="text-gray-600 dark:text-gray-400"> Manage how and when you receive notifications </p> </div> {/* Notification Settings */} <div className="space-y-6"> {/* Bet Status Updates */} <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6"> <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4"> Bet Status Updates </h2> <div className="space-y-4"> <div className="flex items-center justify-between"> <div> <label className="text-sm font-medium text-gray-700 dark:text-gray-300"> Wins </label> <p className="text-xs text-gray-500 dark:text-gray-400"> Notify when a bet wins </p> </div> <label className="relative inline-flex items-center cursor-pointer"> <input type="checkbox" className="sr-only peer" defaultChecked aria-label="Enable win notifications" /> <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div> </label> </div> <div className="flex items-center justify-between"> <div> <label className="text-sm font-medium text-gray-700 dark:text-gray-300"> Losses </label> <p className="text-xs text-gray-500 dark:text-gray-400"> Notify when a bet loses </p> </div> <label className="relative inline-flex items-center cursor-pointer"> <input type="checkbox" className="sr-only peer" aria-label="Enable loss notifications" /> <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div> </label> </div> <div className="flex items-center justify-between"> <div> <label className="text-sm font-medium text-gray-700 dark:text-gray-300"> Pushes </label> <p className="text-xs text-gray-500 dark:text-gray-400"> Notify when a bet pushes </p> </div> <label className="relative inline-flex items-center cursor-pointer"> <input type="checkbox" className="sr-only peer" aria-label="Enable push notifications" /> <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div> </label> </div> </div> </div> {/* Line Movement Alerts */} <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-6"> <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4"> Line Movement Alerts </h2> <div className="space-y-4"> <div className="flex items-center justify-between"> <div> <label className="text-sm font-medium text-gray-700 dark:text-gray-300"> Favorable Movement </label> <p className="text-xs text-gray-500 dark:text-gray-400"> Alert when odds move in your favor </p> </div> <label className="relative inline-flex items-center cursor-pointer"> <input type="checkbox" className="sr-only peer" aria-label="Enable favorable movement alerts" /> <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div> </label> </div> <div className="flex items-center justify-between"> <div> <label className="text-sm font-medium text-gray-700 dark:text-gray-300"> Significant Moves </label> <p className="text-xs text-gray-500 dark:text-gray-400"> Alert on major line movements (5+ points) </p> </div> <label className="relative inline-flex items-center cursor-pointer"> <input type="checkbox" className="sr-only peer" aria-label="Enable major line movement alerts" /> <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div> </label> </div> </div> </div> {/* Coming Soon Notice */} <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4"> <div className="flex items-start"> <svg className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20"> <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" /> </svg> <div> <p className="text-sm font-medium text-blue-800 dark:text-blue-300"> Notifications Coming Soon! </p> <p className="text-xs text-blue-600 dark:text-blue-400 mt-1"> Email and push notification support will be added in a future update. Settings shown are placeholders. </p> </div> </div> </div> </div> </div> </div> ); } |