PatAlcala9/aio-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed ui

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-06-05 16:06:26 +08:00
parent 307f624015
commit f1efb38dd4
2 changed files with 175 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/components/PageComponents/Color-Converter/ColorConverterComponent.sass
View file

@ -4,10 +4,84 @@
.section
display: flex
flex-direction: column
flex-direction: row
align-items: flex-start
padding: 2rem
border: 2px solid color.adjust(vars.$background, $lightness: 6%)
border: vars.$componentBorder
border-radius: vars.$borderRadius
background-color: vars.$componentBackground
color: #ffffff
gap: 2rem
&__input
display: flex
flex-direction: column
align-items: flex-start
gap: 1rem
&__presets
display: flex
flex-direction: row
gap: 0.25rem
&__selector
margin: 2rem 0 0 0
&__root
// position: relative
display: flex
flex-direction: column
align-items: center
user-select: none
touch-action: none
&__background
position: relative
border-radius: 6px
height: 15.75rem
width: 18.85rem
&__thumb
display: block
width: 16px
height: 16px
border-radius: 9999px
border: 2px solid #fff
background: var(--kb-color-current)
&:focus
outline: none
&__results
@extend .section__input
// .ColorAreaRoot
// position: relative
// display: flex
// flex-direction: column
// align-items: center
// user-select: none
// touch-action: none
// width: 200px
// .ColorAreaBackground
// position: relative
// border-radius: 6px
// height: 150px
// width: 150px
// .ColorAreaThumb
// display: block
// width: 16px
// height: 16px
// border-radius: 9999px
// border: 2px solid #fff
// background: var(--kb-color-current)
// &:focus
// outline: none
.ColorArealLabel
font-size: 14px
font-weight: 500
user-select: none

100
src/components/PageComponents/Color-Converter/ColorConverterComponent.tsx
View file

@ -1,10 +1,108 @@
import './ColorConverterComponent.sass'
import ColorSwatch from '../../ColorSwatch/ColorSwatch';
import MiniCard from '../../MiniCard/MiniCard';
import Alert from '../../Alert/Alert.tsx'
import { createSignal, onMount } from "solid-js"
import { colord, extend, random } from 'colord';
import cmykPlugin from "colord/plugins/cmyk";
import namesPlugin from "colord/plugins/names";
import hwbPlugin from "colord/plugins/hwb";
import { ColorArea } from "@kobalte/core/color-area";
import { parseColor } from "@kobalte/core/colors";
extend([cmykPlugin, namesPlugin, hwbPlugin]);
export default () => {
const [color, setColor] = createSignal(parseColor("#ffffff"))
const [presetOne, setPresetOne] = createSignal("")
const [presetTwo, setPresetTwo] = createSignal("")
const [presetThree, setPresetThree] = createSignal("")
const [presetFour, setPresetFour] = createSignal("")
const [presetFive, setPresetFive] = createSignal("")
const [presetSix, setPresetSix] = createSignal("")
const [copiedText, setCopiedText] = createSignal('')
const hex = () => colord(color().toString()).toHex().toUpperCase()
const rgb = () => colord(color().toString()).toRgbString().toUpperCase()
const hsl = () => colord(color().toString()).toHslString().toUpperCase()
const cmyk = () => colord(color().toString()).toCmykString().substring(7).toUpperCase()
const hwb = () => colord(color().toString()).toHwbString().toUpperCase()
const randomColor = () => colord(random().toHex()).toHex()
const setPresets = () => {
setPresetOne(randomColor())
setPresetTwo(randomColor())
setPresetThree(randomColor())
setPresetFour(randomColor())
setPresetFive(randomColor())
setPresetSix(randomColor())
}
const copyToClipboard = async (text: string, alertType: string) => {
try {
navigator.clipboard.writeText(text)
setCopiedText(alertType)
setTimeout(() => setCopiedText(''), 2000)
} catch (error) {
console.error(error)
}
}
onMount(() => setPresets());
const switchColor = (color: string) => {
setColor(parseColor(color))
}
return (
<>
<section class='section'><h1>hello</h1></section>
<section class='section'>
<div class='section__input'>
<span>Color Sample</span>
<ColorSwatch color={color().toString()} height={3} width={19.25} />
<span>Random Presets</span>
<div class='section__input__presets'>
<ColorSwatch color={presetOne()} height={3} width={3} isPreset onClick={() => switchColor(presetOne())} />
<ColorSwatch color={presetTwo()} height={3} width={3} isPreset onClick={() => switchColor(presetTwo())} />
<ColorSwatch color={presetThree()} height={3} width={3} isPreset onClick={() => switchColor(presetThree())} />
<ColorSwatch color={presetFour()} height={3} width={3} isPreset onClick={() => switchColor(presetFour())} />
<ColorSwatch color={presetFive()} height={3} width={3} isPreset onClick={() => switchColor(presetFive())} />
<ColorSwatch color={presetSix()} height={3} width={3} isPreset onClick={() => switchColor(presetSix())} />
</div>
<div class='section__input__selector' >
<ColorArea class="section__input__selector__root" value={color()} onChange={setColor} >
<ColorArea.Background class="section__input__selector__background" >
<ColorArea.Thumb class="section__input__selector__thumb">
<ColorArea.HiddenInputX />
<ColorArea.HiddenInputY />
</ColorArea.Thumb>
</ColorArea.Background>
</ColorArea>
</div>
</div>
<div class='section__results'>
<MiniCard text="Hex" content={hex()} onClick={() => copyToClipboard(hex(), 'Hex')} />
<Alert for="Hex" trigger={copiedText() === 'Hex'} />
<MiniCard text="RGB" content={rgb()} onClick={() => copyToClipboard(rgb(), 'RGB')} />
<Alert for="RGB" trigger={copiedText() === 'RGB'} />
<MiniCard text="HSL" content={hsl()} onClick={() => copyToClipboard(hsl(), 'HSL')} />
<Alert for="HSL" trigger={copiedText() === 'HSL'} />
<MiniCard text="CMYK" content={cmyk().toString()} onClick={() => copyToClipboard(cmyk(), 'CMYK')} />
<Alert for="CMYK" trigger={copiedText() === 'CMYK'} />
<MiniCard text="HWB" content={hwb().toString()} onClick={() => copyToClipboard(hwb(), 'HWB')} />
<Alert for="HWB" trigger={copiedText() === 'HWB'} />
</div>
</section>
</>
)
}