jaydip.me / moocup
stunning screenshots in seconds https://moocup.jaydip.me
fork atom

fix: export panel cleanup

Jaydip Sanghani 5dca63c7 04f6cd55

+41 -35
unified split
+41 -35
src/components/editor/Navbar.tsx
··· 142 142 : 'grid grid-cols-2 gap-6' 143 143 } 144 144 `}> 145 - <div className={`space-y-6 ${!isMobile ? 'order-2' : 'order-1'}`}> 145 + <div className={`${!isMobile ? 'order-2' : 'order-1'}`}> 146 146 <div> 147 - <h3 className="text-xl font-semibold text-foreground mb-4 flex items-center gap-2"> 147 + <h3 className="text-xl font-semibold text-foreground mb-6 flex items-center gap-2"> 148 148 <Download className="w-5 h-5 text-primary" /> 149 149 Export Settings 150 150 </h3> 151 - <div className="space-y-4"> 151 + <div className="space-y-2"> 152 152 <div className="flex items-center justify-between"> 153 153 <label className="text-sm font-medium">Format</label> 154 - <Badge variant="outline" className="font-mono"> 155 - {exportFormat} 156 - </Badge> 157 154 </div> 158 155 <ToggleGroup 159 156 type="single" ··· 165 162 <ToggleGroupItem 166 163 key={format} 167 164 value={format} 168 - className={`flex-1 text-sm rounded-full cursor-pointer hover:bg-primary/20 hover:text-primary data-[state=on]:bg-primary data-[state=on]:text-black`} 165 + className={`flex-1 text-sm rounded-full cursor-pointer hover:bg-secondary hover:text-secondary-foreground data-[state=on]:bg-primary/20 data-[state=on]:text-primary`} 169 166 > 170 167 {format} 171 168 </ToggleGroupItem> 172 169 ))} 173 170 </ToggleGroup> 174 171 </div> 175 - <div className="space-y-2 mt-4"> 172 + 173 + <div className="space-y-2 mt-6"> 176 174 <div className="flex items-center justify-between"> 177 175 <label className="text-sm font-medium">Quality</label> 178 - <Badge variant="outline" className="font-mono"> 179 - {getQualityLabel(quality[0])} 180 - </Badge> 181 176 </div> 182 - <div className="space-y-3"> 183 - <Slider 184 - value={quality} 185 - onValueChange={setQuality} 186 - min={1} 187 - max={3} 188 - step={1} 189 - className="w-full" 190 - /> 191 - <div className="flex justify-between text-xs text-muted-foreground"> 192 - <span>Standard</span> 193 - <span>High</span> 194 - <span>Ultra</span> 195 - </div> 196 - </div> 177 + <ToggleGroup 178 + type="single" 179 + value={String(quality[0])} 180 + onValueChange={(value) => value && setQuality([parseInt(value)])} 181 + className="flex gap-1 bg-sidebar/80 rounded-full ring-2 ring-secondary p-1" 182 + > 183 + <ToggleGroupItem 184 + value="1" 185 + className="flex-1 text-sm rounded-full cursor-pointer hover:bg-secondary hover:text-secondary-foreground data-[state=on]:bg-primary/20 data-[state=on]:text-primary" 186 + > 187 + Standard 188 + </ToggleGroupItem> 189 + <ToggleGroupItem 190 + value="2" 191 + className="flex-1 text-sm rounded-full cursor-pointer hover:bg-secondary hover:text-secondary-foreground data-[state=on]:bg-primary/20 data-[state=on]:text-primary" 192 + > 193 + High 194 + </ToggleGroupItem> 195 + <ToggleGroupItem 196 + value="3" 197 + className="flex-1 text-sm rounded-full cursor-pointer hover:bg-secondary hover:text-secondary-foreground data-[state=on]:bg-primary/20 data-[state=on]:text-primary" 198 + > 199 + Ultra 200 + </ToggleGroupItem> 201 + </ToggleGroup> 197 202 </div> 198 203 </div> 199 - <div className="space-y-3 grid grid-cols-2 gap-3"> 204 + <div className="space-y-3 grid grid-cols-2 gap-3 mt-12"> 200 205 <Button 201 206 onClick={handleSingleExport} 202 207 className="w-full h-12 font-medium shadow-md" 208 + variant='secondary' 203 209 disabled={isExporting || !uploadedImage} 204 210 > 205 211 {isExporting ? ( ··· 245 251 </Button> 246 252 </div> 247 253 248 - <Card className={`border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 ${!isMobile ? 'order-1' : 'order-2'} group`}> 254 + <Card className={`rounded-xl border-2 border-dashed border-primary/20 ${!isMobile ? 'order-1' : 'order-2'} group`}> 249 255 <CardHeader className="pb-4"> 250 256 <div className="flex items-center gap-2"> 251 257 <Heart className="w-5 h-5 text-primary fill-primary/20 group-hover:fill-primary/50 transition-colors group-hover:animate-pulse group-hover:scale-110" /> ··· 287 293 className="flex items-center" 288 294 > 289 295 <Coffee className="w-5 h-5" /> 290 - <span className="font-medium">Buy me a coffee</span> 296 + <span className="font-medium">Buy a coffee</span> 291 297 </a> 292 298 </Button> 293 299 <Dialog> ··· 296 302 variant="outline" 297 303 className="w-full h-12 border-primary/30 hover:bg-primary/5 hover:border-primary/50 inline-flex items-center" 298 304 > 299 - <QrCode className="w-5 h-5 -ml-10" /> 305 + <QrCode className="w-5 h-5" /> 300 306 <span className="font-medium">UPI (India)</span> 301 307 </Button> 302 308 </DialogTrigger> ··· 315 321 </DialogContent> 316 322 </Dialog> 317 323 </div> 318 - <div className="space-y-2 pt-2 border-t border-primary/10"> 319 - <h4 className="text-sm font-medium text-muted-foreground">Say hi! 324 + <div className="space-y-2"> 325 + <h4 className="text-sm font-medium text-muted-foreground">Say Hi! 320 326 <span className='ml-2 text-sm text-muted-foreground leading-relaxed'> 321 327 I'm always up for quick chat :) 322 328 </span> 323 329 </h4> 324 330 <div className="flex gap-2"> 325 - <Button variant="outline" size="sm" asChild className="flex-1 border-primary/30 hover:border-primary/50"> 331 + <Button variant="secondary" size="sm" asChild className="flex-1 border-primary/30 hover:border-primary/50"> 326 332 <a 327 333 href="https://bsky.app/profile/jellydeck.bsky.social" 328 334 target="_blank" ··· 339 345 <span>Bluesky</span> 340 346 </a> 341 347 </Button> 342 - <Button variant="outline" size="sm" asChild className="flex-1 border-primary/30 hover:border-primary/50"> 348 + <Button variant="secondary" size="sm" asChild className="flex-1 border-primary/30 hover:border-primary/50"> 343 349 <a 344 350 href="https://twitter.com/JellyDeck" 345 351 target="_blank" ··· 465 471 <ChevronDown className={`w-4 h-4 transition-transform ${showExportOptions ? 'rotate-180' : ''}`} /> 466 472 </Button> 467 473 {showExportOptions && ( 468 - <Card className="absolute right-0 top-full mt-2 w-[900px] shadow-lg z-50 bg-background border"> 474 + <Card className="absolute right-0 top-full mt-2 w-[900px] shadow-lg z-50 bg-background border rounded-2xl"> 469 475 <CardContent className="p-6"> 470 476 <ExportOptionsContent /> 471 477 </CardContent>