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