Add Card Component
.commit to change branch
This commit is contained in:
Aoife
+3
-3
@@ -4,9 +4,9 @@ import Editor from './features/editor';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className='grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
|
||||
<Menu className='col-span-1' />
|
||||
<Editor className='col-span-5' />
|
||||
<div className='bg-gray-100 grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
|
||||
<Menu />
|
||||
<Editor />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,8 +13,9 @@ import { selectById } from './timbreSlice.js';
|
||||
export default function Timbre(props) {
|
||||
const ids = useSelector((state) => selectById(state, props.id));
|
||||
return (
|
||||
<div>
|
||||
<div className='h-screen grid grid-cols-8 grid-rows-3 gap-4 m-6'>
|
||||
<VCO
|
||||
className='col-span-2'
|
||||
name='VCO 1'
|
||||
id={ids.vco1}
|
||||
waveforms={[
|
||||
@@ -96,6 +97,7 @@ export default function Timbre(props) {
|
||||
]}
|
||||
/>
|
||||
<VCO
|
||||
className='col-span-2'
|
||||
name='VCO 2'
|
||||
id={ids.vco2}
|
||||
waveforms={[
|
||||
@@ -111,14 +113,14 @@ export default function Timbre(props) {
|
||||
{ value: 'Ring Sync' },
|
||||
]}
|
||||
/>
|
||||
<Mixer name='Mixer' id={ids.mixer} />
|
||||
<Pitch name='Pitch' id={ids.pitch} />
|
||||
<Filter name='Filter' id={ids.filter} />
|
||||
<Amp name='Amp' id={ids.amp} />
|
||||
<EG name='EG 1' id={ids.eg1} />
|
||||
<EG name='EG 2' id={ids.eg2} />
|
||||
<div />
|
||||
<Mixer className='col-span-1' name='Mixer' id={ids.mixer} />
|
||||
<Pitch className='col-span-3' name='Pitch' id={ids.pitch} />
|
||||
<Filter className='col-span-2' name='Filter' id={ids.filter} />
|
||||
<Amp className='col-span-2' name='Amp' id={ids.amp} />
|
||||
<EG className='col-span-2' name='EG 1' id={ids.eg1} />
|
||||
<EG className='col-span-2' name='EG 2' id={ids.eg2} />
|
||||
<LFO
|
||||
className='col-span-2'
|
||||
name='LFO 1'
|
||||
id={ids.lfo1}
|
||||
waveforms={[
|
||||
@@ -129,6 +131,7 @@ export default function Timbre(props) {
|
||||
]}
|
||||
/>
|
||||
<LFO
|
||||
className='col-span-2'
|
||||
name='LFO 2'
|
||||
id={ids.lfo2}
|
||||
waveforms={[
|
||||
@@ -138,7 +141,7 @@ export default function Timbre(props) {
|
||||
{ value: 'Sample & Hold' },
|
||||
]}
|
||||
/>
|
||||
<Patches name='Patches' id={ids.patches} />
|
||||
<Patches className='col-span-2' name='Patches' id={ids.patches} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
export default function Card(props = { className: 'col-span-2' }) {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
props.className +
|
||||
' flex flex-col justify-start border border-gray-200 rounded-md shadow-md bg-white'
|
||||
}>
|
||||
<header className='flex items-start justify-between py-3 px-4 border-b border-solid border-gray-200'>
|
||||
<h3 className='text-xl font-semibold text-gray-900'>{props.header}</h3>
|
||||
</header>
|
||||
<section className='flex-grow flex flex-col justify-evenly px-6'>
|
||||
{props.children}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,10 +4,10 @@ import Effects from './Effects';
|
||||
import Arpeggio from './Arpeggio';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
const Editor = () => {
|
||||
export default function Editor() {
|
||||
const activeTab = useSelector((state) => state.parameters.activeTab);
|
||||
return (
|
||||
<div>
|
||||
<div className='col-span-5'>
|
||||
{activeTab === 'Timbre1' ? <Timbre id='timbre1' /> : null}
|
||||
{activeTab === 'Timbre2' ? <Timbre id='timbre2' /> : null}
|
||||
{activeTab === 'Vocoder' ? <Vocoder id='vocoder' /> : null}
|
||||
@@ -15,6 +15,4 @@ const Editor = () => {
|
||||
{activeTab === 'Arpeggio' ? <Arpeggio id='arpeggio' /> : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Editor;
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function Amp(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Amp Level
|
||||
<Slider
|
||||
@@ -73,7 +73,7 @@ export const VocoderAmp = (props) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Amp Level
|
||||
<Slider
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function EG(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Attack
|
||||
<Slider
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function Filter(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Filter Type
|
||||
<SelectList
|
||||
@@ -92,7 +92,7 @@ export const VocoderFilter = (props) => {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
return (
|
||||
<div>
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Cutoff
|
||||
<Slider
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function LFO(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
LFO Waveform
|
||||
<SelectList
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
@@ -8,50 +9,55 @@ export default function Mixer(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
Volume 1
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol1: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Volume 2
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol2: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Volume 3
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Card header={props.name}>
|
||||
<div className='-mt-2'>
|
||||
<h3 className='text-lg font-semibold'>Volume 1</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol1}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol1: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='-mt-2'>
|
||||
<h3 className='text-lg font-semibold'>Volume 2</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol2}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol2: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='text-lg font-semibold'>Volume 3</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.vol3}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vol3: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -70,7 +70,7 @@ export default function Patches(props) {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div id='patches'>
|
||||
<div className={props.className} id='patches'>
|
||||
<span>{`${props.name}`}</span>
|
||||
<Patch
|
||||
patch={parameters.patch1}
|
||||
|
||||
@@ -1,130 +1,135 @@
|
||||
import React from 'react';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList } from '../../helpers/Helpers';
|
||||
import { Select } from '../../utils/components';
|
||||
import { Slider } from '../../helpers/Helpers';
|
||||
|
||||
export default function Pitch(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
<div>
|
||||
Voice Assign
|
||||
<SelectList
|
||||
value={parameters.voiceAssign}
|
||||
list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { voiceAssign: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Trigger Mode
|
||||
<SelectList
|
||||
value={parameters.triggerMode}
|
||||
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { triggerMode: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Transpose
|
||||
<Slider
|
||||
parameter={parameters.transpose}
|
||||
min={-24}
|
||||
max={24}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { transpose: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Card className={props.className} header={props.name}>
|
||||
<div className='flex flex-row justify-evenly'>
|
||||
<div className='flex flex-col w-1/2'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Voice Assign</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.voiceAssign}
|
||||
list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { voiceAssign: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Trigger Mode</h3>
|
||||
<Select
|
||||
className='select w-2/4'
|
||||
value={parameters.triggerMode}
|
||||
list={[{ value: 'Single' }, { value: 'Multiple' }]}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { triggerMode: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3 className='font-normal mt-1'>Transpose</h3>
|
||||
<Slider
|
||||
parameter={parameters.transpose}
|
||||
min={-24}
|
||||
max={24}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { transpose: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3 className='font-normal'>Tune</h3>
|
||||
<Slider
|
||||
parameter={parameters.tune}
|
||||
min={-50}
|
||||
max={50}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tune: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='w-10'></div>
|
||||
<div className='flex flex-col justify-evenly w-1/2'>
|
||||
<h3 className='font-normal mt-1'>Unison Detune</h3>
|
||||
<Slider
|
||||
parameter={parameters.unisonDetune}
|
||||
min={0}
|
||||
max={99}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { unisonDetune: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3 className='font-normal mt-1'>Portamento</h3>
|
||||
<Slider
|
||||
parameter={parameters.portamento}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { portamento: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3 className='font-normal mt-1'>Bend Range</h3>
|
||||
<Slider
|
||||
parameter={parameters.bendRange}
|
||||
min={-12}
|
||||
max={12}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { bendRange: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
<h3 className='font-normal mt-1'>Vibrato Intensity</h3>
|
||||
<Slider
|
||||
parameter={parameters.vibratoIntensity}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vibratoIntensity: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
<div>
|
||||
Tune
|
||||
<Slider
|
||||
parameter={parameters.tune}
|
||||
min={-50}
|
||||
max={50}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { tune: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Unisone Detune
|
||||
<Slider
|
||||
parameter={parameters.unisonDetune}
|
||||
min={0}
|
||||
max={99}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { unisonDetune: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Portamento
|
||||
<Slider
|
||||
parameter={parameters.portamento}
|
||||
min={0}
|
||||
max={127}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { portamento: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Bend Range
|
||||
<Slider
|
||||
parameter={parameters.bendRange}
|
||||
min={-12}
|
||||
max={12}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { bendRange: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Vibrato Intensity
|
||||
<Slider
|
||||
parameter={parameters.vibratoIntensity}
|
||||
min={-63}
|
||||
max={63}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { vibratoIntensity: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,70 +1,81 @@
|
||||
import React from 'react';
|
||||
import Card from '../card';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { selectById, parameterUpdated } from './parameterSlice.js';
|
||||
import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
|
||||
import { Select } from '../../utils/components';
|
||||
import { Slider, Checkbox } from '../../helpers/Helpers';
|
||||
|
||||
export default function VCO(props) {
|
||||
const parameters = useSelector((state) => selectById(state, props.id));
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span>{`${props.name}`}</span>
|
||||
Waveform
|
||||
<SelectList
|
||||
value={parameters.waveform}
|
||||
list={props.waveforms}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { waveform: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
{`${props.dwgsOrModTypeName}`}
|
||||
<SelectList
|
||||
value={parameters.dwgsOrModType}
|
||||
list={props.dwgsOrModType}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { dwgsOrModType: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
Waveform Mod
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.waveMod}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { waveMod: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
LFO Mod
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.lfoMod}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { lfoMod: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<Card className='col-span-2' header={props.name}>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Waveform</h3>
|
||||
<Select
|
||||
className='select w-3/5'
|
||||
value={parameters.waveform}
|
||||
list={props.waveforms}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { waveform: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>{`${props.dwgsOrModTypeName}`}</h3>
|
||||
<Select
|
||||
className='select w-3/5'
|
||||
value={parameters.dwgsOrModType}
|
||||
list={props.dwgsOrModType}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { dwgsOrModType: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center justify-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.waveMod}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { waveMod: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex items-center justify-center'>
|
||||
<h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
|
||||
<Slider
|
||||
min={0}
|
||||
max={127}
|
||||
parameter={parameters.lfoMod}
|
||||
onChange={(value) =>
|
||||
dispatch(
|
||||
parameterUpdated({
|
||||
id: props.id,
|
||||
changes: { lfoMod: value },
|
||||
})
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -73,7 +84,7 @@ export const AudioIn = (props) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={props.className}>
|
||||
<span>{`${props.name}`}</span>
|
||||
Gate
|
||||
<Slider
|
||||
|
||||
@@ -30,7 +30,7 @@ export default function Menu() {
|
||||
}, [file, dispatch]);
|
||||
|
||||
return (
|
||||
<div className='flex flex-col justify-around border-solid border-r border-black px-4'>
|
||||
<div className='col-span-1 flex flex-col justify-around border-solid border-r border-black bg-white px-4'>
|
||||
<div className='menu-patch-container'>
|
||||
<div className='patch-name'>
|
||||
<input
|
||||
@@ -83,7 +83,7 @@ export default function Menu() {
|
||||
</div>
|
||||
<div className='patch-settings'>
|
||||
<Select
|
||||
className='w-full bg-gray-100 rounded-md border-transparent hover:bg-gray-200 focus:bg-white focus:ring-1'
|
||||
className='w-full select'
|
||||
value={state.patch.mode}
|
||||
list={[
|
||||
{ value: 'Single' },
|
||||
|
||||
@@ -25,4 +25,7 @@ code {
|
||||
.btn:disabled {
|
||||
@apply opacity-60 hover:bg-gray-100 cursor-default;
|
||||
}
|
||||
.select {
|
||||
@apply block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user