feat(saju-ui-v2): PrimaryButton + GhostButton + InputRow

This commit is contained in:
2026-05-27 02:05:08 +09:00
parent 78e7e68bb0
commit 50ec52ab6e
3 changed files with 72 additions and 0 deletions

View File

@@ -0,0 +1,18 @@
import React from 'react';
import hexA from './helpers/hexA';
export default function GhostButton({
children, color = '#1F2A44', onClick, full = true, style = {}, type = 'button',
}) {
return (
<button type={type} onClick={onClick} style={{
width: full ? '100%' : 'auto', padding: '13px 22px',
background: 'transparent', color, border: `1px solid ${hexA(color, 0.4)}`,
borderRadius: 12, fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
...style,
}}>
{children}
</button>
);
}

View File

@@ -0,0 +1,32 @@
import React from 'react';
export default function InputRow({
label, name, type = 'text', value, onChange, placeholder, error, children,
}) {
return (
<div style={{
display: 'flex', alignItems: 'center', padding: '12px 14px',
borderBottom: '1px solid rgba(31,42,68,0.06)', gap: 12,
}}>
<label htmlFor={name} style={{
width: 80, fontSize: 12, color: '#6B6B6B', fontWeight: 700, letterSpacing: '-0.01em',
}}>{label}</label>
<div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8 }}>
{children || (
<input
id={name} name={name} type={type} value={value} onChange={onChange}
placeholder={placeholder}
style={{
flex: 1, padding: '8px 10px', border: '1px solid rgba(31,42,68,0.12)',
borderRadius: 8, background: '#FBF7EF',
fontSize: 13, color: '#1F2A44', fontFamily: 'inherit',
}}
/>
)}
{error && (
<span style={{ fontSize: 11, color: '#C04A4A', fontWeight: 700 }}>{error}</span>
)}
</div>
</div>
);
}

View File

@@ -0,0 +1,22 @@
import React from 'react';
import hexA from './helpers/hexA';
export default function PrimaryButton({
children, color = '#1F2A44', onClick, full = true, style = {}, gold = true, type = 'button',
}) {
return (
<button type={type} onClick={onClick} style={{
width: full ? '100%' : 'auto', padding: '14px 22px',
background: color, color: '#F7F2E8',
border: 'none', borderRadius: 12,
fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em',
boxShadow: gold
? `0 2px 0 ${hexA(color, 0.4)}, 0 6px 18px ${hexA(color, 0.25)}, inset 0 1px 0 rgba(212,175,55,0.4)`
: '0 4px 14px rgba(31,42,68,0.18)',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
...style,
}}>
{children}
</button>
);
}