feat(saju-ui-v2): PrimaryButton + GhostButton + InputRow
This commit is contained in:
18
src/pages/saju/_shell/GhostButton.jsx
Normal file
18
src/pages/saju/_shell/GhostButton.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
32
src/pages/saju/_shell/InputRow.jsx
Normal file
32
src/pages/saju/_shell/InputRow.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
22
src/pages/saju/_shell/PrimaryButton.jsx
Normal file
22
src/pages/saju/_shell/PrimaryButton.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user