Rename store items to store products and add an empty-state CTA.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-15 14:56:08 +03:30
co-authored by Cursor
parent 8e8929050e
commit 9a59bc8f65
3 changed files with 130 additions and 23 deletions
@@ -14,6 +14,82 @@
border-radius: var(--radius);
}
.emptyState {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 56px 28px;
text-align: center;
background: var(--glass-bg);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--glass-shadow);
}
.emptyIcon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
border-radius: 16px;
color: var(--primary);
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.72) 0%,
rgba(var(--primary-rgb) / 0.12) 100%
);
border: 1px solid rgba(255, 255, 255, 0.45);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.emptyTitle {
margin: 0;
font-size: 17px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.4;
}
.emptyHint {
margin: 0 0 8px;
max-width: 360px;
font-size: 13px;
line-height: 1.65;
color: var(--text-secondary);
}
.emptyCta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 10px 20px;
font-size: 14px;
font-weight: 600;
color: #fff;
text-align: center;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-radius: 999px;
box-shadow: 0 8px 20px rgba(var(--primary-rgb) / 0.32);
transition: transform 0.2s, box-shadow 0.2s;
}
button.emptyCta {
text-align: center;
}
.emptyCta:hover {
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(var(--primary-rgb) / 0.4);
}
.error {
margin-bottom: 16px;
padding: 12px 14px;