mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-20 07:26:19 +00:00
feat: custom chat prefix system with effects, gradient colors, emoji icons and per-letter coloring
This commit is contained in:
Life
@@ -1,7 +1,7 @@
|
||||
import { PurchasePrefixComposer } from '@nitrots/nitro-renderer';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { FC, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { SendMessageComposer, PRESET_PREFIX_EFFECTS, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../../api';
|
||||
import { LocalizeText, SendMessageComposer, PRESET_PREFIX_EFFECTS, generateGradientColors } from '../../../../../api';
|
||||
import { PrefixPreview } from '../../../../../layout';
|
||||
import { CatalogLayoutProps } from './CatalogLayout.types';
|
||||
import data from '@emoji-mart/data';
|
||||
import Picker from '@emoji-mart/react';
|
||||
@@ -23,11 +23,13 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
}, [ page, hideNavigation ]);
|
||||
|
||||
const [ prefixText, setPrefixText ] = useState('');
|
||||
const [ colorMode, setColorMode ] = useState<'single' | 'perLetter'>('single');
|
||||
const [ colorMode, setColorMode ] = useState<'single' | 'perLetter' | 'gradient'>('single');
|
||||
const [ singleColor, setSingleColor ] = useState('#FFFFFF');
|
||||
const [ letterColors, setLetterColors ] = useState<Record<number, string>>({});
|
||||
const [ selectedLetterIndex, setSelectedLetterIndex ] = useState<number | null>(null);
|
||||
const [ customColorInput, setCustomColorInput ] = useState('#FFFFFF');
|
||||
const [ gradientStart, setGradientStart ] = useState('#FF0000');
|
||||
const [ gradientEnd, setGradientEnd ] = useState('#0066FF');
|
||||
const [ selectedIcon, setSelectedIcon ] = useState('');
|
||||
const [ showIconPicker, setShowIconPicker ] = useState(false);
|
||||
const [ selectedEffect, setSelectedEffect ] = useState('');
|
||||
@@ -63,15 +65,16 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
{
|
||||
if(colorMode === 'single') return singleColor;
|
||||
|
||||
if(colorMode === 'gradient')
|
||||
{
|
||||
const steps = Math.max(prefixText.length, 2);
|
||||
return generateGradientColors(gradientStart, gradientEnd, steps).join(',');
|
||||
}
|
||||
|
||||
if(!prefixText.length) return singleColor;
|
||||
|
||||
return [ ...prefixText ].map((_, i) => letterColors[i] || singleColor).join(',');
|
||||
}, [ colorMode, singleColor, letterColors, prefixText ]);
|
||||
|
||||
const previewColors = useMemo(() =>
|
||||
{
|
||||
return parsePrefixColors(prefixText || '...', colorString || '#FFFFFF');
|
||||
}, [ prefixText, colorString ]);
|
||||
}, [ colorMode, singleColor, letterColors, prefixText, gradientStart, gradientEnd ]);
|
||||
|
||||
const isValid = useMemo(() =>
|
||||
{
|
||||
@@ -79,9 +82,12 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
|
||||
if(colorMode === 'single') return /^#[0-9A-Fa-f]{6}$/.test(singleColor);
|
||||
|
||||
if(colorMode === 'gradient')
|
||||
return /^#[0-9A-Fa-f]{6}$/.test(gradientStart) && /^#[0-9A-Fa-f]{6}$/.test(gradientEnd);
|
||||
|
||||
const colors = colorString.split(',');
|
||||
return colors.every(c => /^#[0-9A-Fa-f]{6}$/.test(c));
|
||||
}, [ prefixText, colorMode, singleColor, colorString ]);
|
||||
}, [ prefixText, colorMode, singleColor, colorString, gradientStart, gradientEnd ]);
|
||||
|
||||
const handlePurchase = () =>
|
||||
{
|
||||
@@ -99,12 +105,12 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
setSingleColor(color);
|
||||
setCustomColorInput(color);
|
||||
}
|
||||
else if(selectedLetterIndex !== null)
|
||||
else if(colorMode === 'perLetter' && selectedLetterIndex !== null)
|
||||
{
|
||||
setLetterColors(prev => ({ ...prev, [selectedLetterIndex]: color }));
|
||||
setCustomColorInput(color);
|
||||
|
||||
// Auto-advance to next letter
|
||||
// Auto-avanza alla lettera successiva
|
||||
if(selectedLetterIndex < prefixText.length - 1)
|
||||
{
|
||||
const nextIdx = selectedLetterIndex + 1;
|
||||
@@ -123,7 +129,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
{
|
||||
setSingleColor(value);
|
||||
}
|
||||
else if(selectedLetterIndex !== null)
|
||||
else if(colorMode === 'perLetter' && selectedLetterIndex !== null)
|
||||
{
|
||||
setLetterColors(prev => ({ ...prev, [selectedLetterIndex]: value }));
|
||||
}
|
||||
@@ -148,18 +154,12 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
setLetterColors(newColors);
|
||||
};
|
||||
|
||||
const hasMultiColor = colorMode === 'perLetter' && previewColors.length > 1 && new Set(previewColors).size > 1;
|
||||
|
||||
const currentActiveColor = colorMode === 'single'
|
||||
? singleColor
|
||||
: (selectedLetterIndex !== null ? (letterColors[selectedLetterIndex] || singleColor) : singleColor);
|
||||
|
||||
const effectStyle = getPrefixEffectStyle(selectedEffect, previewColors[0] || '#FFFFFF');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 h-full overflow-auto p-1">
|
||||
<style>{ PREFIX_EFFECT_KEYFRAMES }</style>
|
||||
|
||||
{ /* Header */ }
|
||||
{ page.localization.getImage(0) &&
|
||||
<img alt="" className="w-full rounded" src={ page.localization.getImage(0) } /> }
|
||||
@@ -175,31 +175,48 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
} }>
|
||||
<div className="absolute inset-0 rounded-lg opacity-20"
|
||||
style={ { background: 'radial-gradient(ellipse at center, rgba(100,149,237,0.3) 0%, transparent 70%)' } } />
|
||||
<span className="relative text-xl font-bold tracking-wide" style={ effectStyle }>
|
||||
{ selectedIcon && <span className="mr-1">{ selectedIcon }</span> }
|
||||
<span style={ hasMultiColor ? effectStyle : { ...effectStyle, color: previewColors[0] || '#FFFFFF' } }>
|
||||
{'{'}
|
||||
{ hasMultiColor
|
||||
? [ ...(prefixText || '...') ].map((char, i) => (
|
||||
<span key={ i } style={ { color: previewColors[i] || previewColors[previewColors.length - 1], ...getPrefixEffectStyle(selectedEffect, previewColors[i]) } }>{ char }</span>
|
||||
))
|
||||
: (prefixText || '...')
|
||||
}
|
||||
{'}'}
|
||||
</span>
|
||||
<span className="relative flex items-center">
|
||||
<PrefixPreview
|
||||
className="tracking-wide"
|
||||
color={ colorString }
|
||||
effect={ selectedEffect }
|
||||
icon={ selectedIcon }
|
||||
text={ prefixText || '...' }
|
||||
textSize="text-xl" />
|
||||
<span className="ml-2 text-white/80 text-lg font-medium">Username</span>
|
||||
</span>
|
||||
<span className="relative ml-2 text-white/80 text-lg font-medium">Username</span>
|
||||
</div>
|
||||
|
||||
{ /* Chat Bubble Preview */ }
|
||||
<div className="relative rounded-lg overflow-hidden p-2"
|
||||
style={ { background: 'rgba(0,0,0,0.08)', border: '1px solid rgba(0,0,0,0.06)' } }>
|
||||
<div className="text-[10px] opacity-40 mb-1 uppercase font-bold tracking-wider">{ LocalizeText('catalog.prefix.chat.preview') }</div>
|
||||
<div className="chat-bubble bubble-0 type-0 max-w-[350px] relative z-1 wrap-break-word min-h-[26px] text-[14px]">
|
||||
<div className="chat-content py-[5px] px-[6px] ml-[27px] leading-none min-h-[25px]">
|
||||
{ (prefixText || '...') &&
|
||||
<PrefixPreview
|
||||
className="mr-1"
|
||||
color={ colorString }
|
||||
effect={ selectedEffect }
|
||||
icon={ selectedIcon }
|
||||
text={ prefixText || '...' }
|
||||
textSize="text-[inherit]" /> }
|
||||
<b className="username">Username: </b>
|
||||
<span className="message">Hello everyone!</span>
|
||||
</div>
|
||||
<div className="pointer absolute left-[50%] translate-x-[-50%] w-[9px] h-[6px] bottom-[-5px]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Text + Icon Row */ }
|
||||
<div className="flex gap-2">
|
||||
<div className="flex flex-col gap-0.5 flex-1">
|
||||
<label className="text-[11px] font-bold uppercase tracking-wider opacity-60">Text</label>
|
||||
<label className="text-[11px] font-bold uppercase tracking-wider opacity-60">{ LocalizeText('catalog.prefix.text') }</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
className="w-full px-3 py-1.5 rounded-md text-sm focus:outline-none transition-all"
|
||||
maxLength={ 15 }
|
||||
placeholder="Enter text..."
|
||||
placeholder={ LocalizeText('catalog.prefix.text.placeholder') }
|
||||
style={ {
|
||||
background: 'rgba(0,0,0,0.15)',
|
||||
border: '1px solid rgba(0,0,0,0.15)',
|
||||
@@ -214,7 +231,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-0.5 relative">
|
||||
<label className="text-[11px] font-bold uppercase tracking-wider opacity-60">Icon</label>
|
||||
<label className="text-[11px] font-bold uppercase tracking-wider opacity-60">{ LocalizeText('catalog.prefix.icon') }</label>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
className="flex items-center justify-center gap-1 px-3 py-1.5 rounded-md text-sm transition-all min-w-[70px]"
|
||||
@@ -232,7 +249,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
<button
|
||||
className="flex items-center justify-center px-1.5 rounded-md text-xs transition-all"
|
||||
style={ { background: 'rgba(239,68,68,0.15)', border: '1px solid rgba(239,68,68,0.3)' } }
|
||||
title="Remove icon"
|
||||
title={ LocalizeText('catalog.prefix.icon.remove') }
|
||||
onClick={ () => setSelectedIcon('') }>
|
||||
✕
|
||||
</button>
|
||||
@@ -241,14 +258,14 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Emoji Picker (emoji-mart) - portaled to body, no backdrop */ }
|
||||
{ showIconPicker && createPortal(
|
||||
{ /* Emoji Picker (emoji-mart) - fixed overlay */ }
|
||||
{ showIconPicker && (
|
||||
<>
|
||||
<div className="fixed inset-0" style={ { zIndex: 9998 } } onClick={ () => setShowIconPicker(false) } />
|
||||
<div ref={ pickerContainerRef } className="fixed rounded-xl overflow-hidden" style={ { zIndex: 9999, top: '50%', left: '50%', transform: 'translate(-50%, -50%)', background: '#2b2f35' } }>
|
||||
<div className="fixed inset-0" style={ { zIndex: 999, background: 'rgba(0,0,0,0.5)' } } onClick={ () => setShowIconPicker(false) } />
|
||||
<div ref={ pickerContainerRef } className="fixed rounded-xl overflow-hidden" style={ { zIndex: 1000, top: '50%', left: '50%', transform: 'translate(-50%, -50%)', boxShadow: '0 8px 32px rgba(0,0,0,0.6)' } }>
|
||||
<Picker
|
||||
data={ data }
|
||||
locale="en"
|
||||
locale="it"
|
||||
onEmojiSelect={ (emoji: { native: string }) => { setSelectedIcon(emoji.native); setShowIconPicker(false); } }
|
||||
theme="dark"
|
||||
previewPosition="none"
|
||||
@@ -261,13 +278,12 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
set="native"
|
||||
/>
|
||||
</div>
|
||||
</>,
|
||||
document.body
|
||||
</>
|
||||
) }
|
||||
|
||||
{ /* Effect Selector */ }
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[11px] font-bold uppercase tracking-wider opacity-60">Effect</label>
|
||||
<label className="text-[11px] font-bold uppercase tracking-wider opacity-60">{ LocalizeText('catalog.prefix.effect') }</label>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{ PRESET_PREFIX_EFFECTS.map(fx => (
|
||||
<button
|
||||
@@ -287,7 +303,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
|
||||
{ /* Color Mode Toggle */ }
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-[11px] font-bold uppercase tracking-wider opacity-60">Color</label>
|
||||
<label className="text-[11px] font-bold uppercase tracking-wider opacity-60">{ LocalizeText('catalog.prefix.color') }</label>
|
||||
<div className="flex rounded-md overflow-hidden" style={ { border: '1px solid rgba(0,0,0,0.15)' } }>
|
||||
<button
|
||||
className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
|
||||
@@ -297,26 +313,86 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
opacity: colorMode === 'single' ? 1 : 0.6
|
||||
} }
|
||||
onClick={ () => { setColorMode('single'); setSelectedLetterIndex(null); } }>
|
||||
🎨 Single
|
||||
{ LocalizeText('catalog.prefix.color.single') }
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
|
||||
style={ {
|
||||
background: colorMode === 'perLetter' ? 'rgba(59,130,246,0.25)' : 'rgba(0,0,0,0.1)',
|
||||
borderRight: '1px solid rgba(0,0,0,0.1)',
|
||||
opacity: colorMode === 'perLetter' ? 1 : 0.6
|
||||
} }
|
||||
onClick={ () => { setColorMode('perLetter'); if(prefixText.length > 0) setSelectedLetterIndex(0); } }>
|
||||
🌈 Per Letter
|
||||
{ LocalizeText('catalog.prefix.color.per.letter') }
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
|
||||
style={ {
|
||||
background: colorMode === 'gradient' ? 'rgba(59,130,246,0.25)' : 'rgba(0,0,0,0.1)',
|
||||
opacity: colorMode === 'gradient' ? 1 : 0.6
|
||||
} }
|
||||
onClick={ () => { setColorMode('gradient'); setSelectedLetterIndex(null); } }>
|
||||
{ LocalizeText('catalog.prefix.color.gradient') }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Gradient Controls */ }
|
||||
{ colorMode === 'gradient' && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1 flex-1">
|
||||
<label
|
||||
className="relative cursor-pointer shrink-0"
|
||||
style={ {
|
||||
width: '24px', height: '24px', borderRadius: '6px',
|
||||
backgroundColor: gradientStart,
|
||||
border: '2px solid rgba(0,0,0,0.2)',
|
||||
boxShadow: `0 0 6px ${ gradientStart }40`
|
||||
} }>
|
||||
<input className="absolute inset-0 opacity-0 cursor-pointer" style={ { width: '100%', height: '100%' } }
|
||||
type="color" value={ gradientStart }
|
||||
onChange={ e => setGradientStart(e.target.value) } />
|
||||
</label>
|
||||
<input className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none"
|
||||
maxLength={ 7 } placeholder="#FF0000"
|
||||
style={ { background: 'rgba(0,0,0,0.15)', border: '1px solid rgba(0,0,0,0.1)', color: 'inherit', borderRadius: '5px' } }
|
||||
type="text" value={ gradientStart }
|
||||
onChange={ e => { const v = e.target.value; setGradientStart(v); } } />
|
||||
</div>
|
||||
<span className="text-xs opacity-40">→</span>
|
||||
<div className="flex items-center gap-1 flex-1">
|
||||
<label
|
||||
className="relative cursor-pointer shrink-0"
|
||||
style={ {
|
||||
width: '24px', height: '24px', borderRadius: '6px',
|
||||
backgroundColor: gradientEnd,
|
||||
border: '2px solid rgba(0,0,0,0.2)',
|
||||
boxShadow: `0 0 6px ${ gradientEnd }40`
|
||||
} }>
|
||||
<input className="absolute inset-0 opacity-0 cursor-pointer" style={ { width: '100%', height: '100%' } }
|
||||
type="color" value={ gradientEnd }
|
||||
onChange={ e => setGradientEnd(e.target.value) } />
|
||||
</label>
|
||||
<input className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none"
|
||||
maxLength={ 7 } placeholder="#0066FF"
|
||||
style={ { background: 'rgba(0,0,0,0.15)', border: '1px solid rgba(0,0,0,0.1)', color: 'inherit', borderRadius: '5px' } }
|
||||
type="text" value={ gradientEnd }
|
||||
onChange={ e => { const v = e.target.value; setGradientEnd(v); } } />
|
||||
</div>
|
||||
</div>
|
||||
{ /* Gradient preview bar */ }
|
||||
<div className="h-2 rounded-full"
|
||||
style={ { background: `linear-gradient(to right, ${ gradientStart }, ${ gradientEnd })` } } />
|
||||
</div>
|
||||
) }
|
||||
|
||||
{ /* Per-Letter Selector */ }
|
||||
{ colorMode === 'perLetter' && prefixText.length > 0 && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] opacity-50">
|
||||
Select a letter, then choose a color. Auto-advances.
|
||||
{ LocalizeText('catalog.prefix.color.hint') }
|
||||
</span>
|
||||
<button
|
||||
className="text-[10px] px-1.5 py-0.5 rounded transition-all"
|
||||
@@ -324,9 +400,9 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
background: 'rgba(0,0,0,0.1)',
|
||||
border: '1px solid rgba(0,0,0,0.1)'
|
||||
} }
|
||||
title="Apply current color to all letters"
|
||||
title={ LocalizeText('catalog.prefix.color.apply.all.title') }
|
||||
onClick={ applyColorToAll }>
|
||||
Apply to all
|
||||
{ LocalizeText('catalog.prefix.color.apply.all') }
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 p-2 rounded-lg"
|
||||
@@ -375,76 +451,73 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
</div>
|
||||
) }
|
||||
|
||||
{ /* Color Palette */ }
|
||||
<div className="flex flex-col gap-1">
|
||||
{ colorMode === 'perLetter' && selectedLetterIndex !== null &&
|
||||
<span className="text-[10px] opacity-50 italic">
|
||||
Selected letter: "{ prefixText[selectedLetterIndex] || '' }"
|
||||
</span>
|
||||
}
|
||||
<div className="grid grid-cols-10 gap-[3px]">
|
||||
{ PRESET_COLORS.map((color, idx) =>
|
||||
{
|
||||
const isActive = currentActiveColor === color;
|
||||
return (
|
||||
<div
|
||||
key={ idx }
|
||||
className="cursor-pointer transition-all"
|
||||
style={ {
|
||||
width: '100%',
|
||||
aspectRatio: '1',
|
||||
borderRadius: '5px',
|
||||
backgroundColor: color,
|
||||
border: isActive ? '2px solid #fff' : '1px solid rgba(0,0,0,0.15)',
|
||||
boxShadow: isActive ? `0 0 6px ${ color }, 0 0 0 1px rgba(0,0,0,0.2)` : 'inset 0 1px 0 rgba(255,255,255,0.2)',
|
||||
transform: isActive ? 'scale(1.2)' : 'scale(1)',
|
||||
zIndex: isActive ? 5 : 1
|
||||
} }
|
||||
onClick={ () => handleColorSelect(color) } />
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<label
|
||||
className="relative cursor-pointer"
|
||||
style={ {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '6px',
|
||||
backgroundColor: customColorInput,
|
||||
border: '2px solid rgba(0,0,0,0.2)',
|
||||
boxShadow: `0 0 6px ${ customColorInput }40, inset 0 1px 0 rgba(255,255,255,0.3)`
|
||||
} }>
|
||||
{ /* Color Palette (single & perLetter modes) */ }
|
||||
{ colorMode !== 'gradient' && (
|
||||
<div className="flex flex-col gap-1">
|
||||
{ colorMode === 'perLetter' && selectedLetterIndex !== null &&
|
||||
<span className="text-[10px] opacity-50 italic">
|
||||
{ LocalizeText('catalog.prefix.color.selected') } "{ prefixText[selectedLetterIndex] || '' }"
|
||||
</span>
|
||||
}
|
||||
<div className="grid gap-1" style={ { gridTemplateColumns: 'repeat(auto-fill, minmax(34px, 1fr))' } }>
|
||||
{ PRESET_COLORS.map((color, idx) =>
|
||||
{
|
||||
const isActive = currentActiveColor === color;
|
||||
return (
|
||||
<div
|
||||
key={ idx }
|
||||
className={ `aspect-square rounded cursor-pointer transition-all duration-100 border-2 ${ isActive ? 'scale-110 border-white shadow-lg' : 'border-transparent hover:scale-105' }` }
|
||||
style={ {
|
||||
backgroundColor: color,
|
||||
boxShadow: isActive ? `0 0 8px ${ color }, 0 0 0 1px rgba(0,0,0,0.3)` : 'inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.15)',
|
||||
zIndex: isActive ? 5 : 1
|
||||
} }
|
||||
onClick={ () => handleColorSelect(color) } />
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<label
|
||||
className="relative cursor-pointer"
|
||||
style={ {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '6px',
|
||||
backgroundColor: customColorInput,
|
||||
border: '2px solid rgba(0,0,0,0.2)',
|
||||
boxShadow: `0 0 6px ${ customColorInput }40, inset 0 1px 0 rgba(255,255,255,0.3)`
|
||||
} }>
|
||||
<input
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
style={ { width: '100%', height: '100%' } }
|
||||
type="color"
|
||||
value={ customColorInput }
|
||||
onChange={ e => handleColorSelect(e.target.value) } />
|
||||
</label>
|
||||
<input
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
style={ { width: '100%', height: '100%' } }
|
||||
type="color"
|
||||
className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none transition-all"
|
||||
maxLength={ 7 }
|
||||
placeholder="#FFFFFF"
|
||||
style={ {
|
||||
background: 'rgba(0,0,0,0.15)',
|
||||
border: '1px solid rgba(0,0,0,0.1)',
|
||||
color: 'inherit',
|
||||
maxWidth: '80px',
|
||||
borderRadius: '5px'
|
||||
} }
|
||||
type="text"
|
||||
value={ customColorInput }
|
||||
onChange={ e => handleColorSelect(e.target.value) } />
|
||||
</label>
|
||||
<input
|
||||
className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none transition-all"
|
||||
maxLength={ 7 }
|
||||
placeholder="#FFFFFF"
|
||||
style={ {
|
||||
background: 'rgba(0,0,0,0.15)',
|
||||
border: '1px solid rgba(0,0,0,0.1)',
|
||||
color: 'inherit',
|
||||
maxWidth: '80px',
|
||||
borderRadius: '5px'
|
||||
} }
|
||||
type="text"
|
||||
value={ customColorInput }
|
||||
onChange={ e => handleCustomColorChange(e.target.value) } />
|
||||
onChange={ e => handleCustomColorChange(e.target.value) } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) }
|
||||
|
||||
{ /* Purchase Footer */ }
|
||||
<div className="flex items-center justify-between mt-auto pt-2"
|
||||
style={ { borderTop: '1px solid rgba(0,0,0,0.1)' } }>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs opacity-60">Price:</span>
|
||||
<span className="text-sm font-bold">5 Credits</span>
|
||||
<span className="text-xs opacity-60">{ LocalizeText('catalog.prefix.price') }</span>
|
||||
<span className="text-sm font-bold">{ LocalizeText('catalog.prefix.price.amount') }</span>
|
||||
</div>
|
||||
<button
|
||||
className="px-5 py-1.5 rounded-md text-sm font-bold transition-all"
|
||||
@@ -462,7 +535,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
borderRadius: '6px'
|
||||
} }
|
||||
onClick={ handlePurchase }>
|
||||
{ purchased ? '✓ Purchased!' : 'Purchase' }
|
||||
{ purchased ? LocalizeText('catalog.prefix.purchased') : LocalizeText('catalog.prefix.purchase') }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user