khalidadil/apparel-designer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix module issues, fix styling, add conditions to when the background removal and edit controls are shown

Browse Source
This commit is contained in:
khalid@traclabs.com
2026-04-23 08:48:11 -05:00
parent 4d19363d58
commit 628a6765f4
32 changed files with 11663 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/sidebar/StickersTab.jsx
View File

@@ -1,5 +1,6 @@
import { useState } from 'react';
import { STICKERS, STICKER_CATEGORIES } from '../../constants/stickers';
import '../../styles/StickersTab.css';
export function StickersTab({ onAddSticker }) {
const [activeCategory, setActiveCategory] = useState('all');
@@ -29,24 +30,20 @@ export function StickersTab({ onAddSticker }) {
return (
<div>
<h3 style={{ margin: '0 0 1rem 0', fontSize: '14px', color: 'var(--text-primary)' }}>Stickers</h3>
<div style={{ display: 'flex', gap: '6px', marginBottom: '1rem', flexWrap: 'wrap' }}>
<h3 className="stickers-title">Stickers</h3>
<div className="stickers-categories">
{STICKER_CATEGORIES.map((cat) => (
<button key={cat} onClick={() => setActiveCategory(cat)}
style={{
padding: '6px 12px', border: `1px solid ${activeCategory === cat ? 'var(--accent)' : 'var(--border)'}`,
borderRadius: 'var(--radius-xl)', background: activeCategory === cat ? 'var(--accent)' : 'var(--bg-primary)',
color: activeCategory === cat ? '#fff' : 'var(--text-secondary)', fontSize: '11px', cursor: 'pointer', textTransform: 'capitalize',
}}
className={`stickers-category-btn${activeCategory === cat ? ' active' : ''}`}
>
{cat}
</button>
))}
</div>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '8px' }}>
<div className="stickers-grid">
{filteredStickers.map((sticker, index) => (
<button key={index} onClick={() => handleAddSticker(sticker.emoji)}
style={{ aspectRatio: '1', border: 'none', borderRadius: 'var(--radius-md)', background: 'var(--bg-primary)', fontSize: '28px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
className="sticker-btn"
>
{sticker.emoji}
</button>