speaker icon

This commit is contained in:
Sergey Krashevich 2023-08-24 18:45:10 +03:00
parent 0ad8397713
commit 3548131f75
No known key found for this signature in database
GPG Key ID: 625171324E7D3856
3 changed files with 24 additions and 19 deletions

View File

@ -5,7 +5,7 @@ import { ArrowDropdown } from '../icons/ArrowDropdown';
import Heading from './Heading'; import Heading from './Heading';
import Button from './Button'; import Button from './Button';
import CameraIcon from '../icons/Camera'; import CameraIcon from '../icons/Camera';
import { AudioIcon } from '../icons/Audio'; import SpeakerIcon from '../icons/Speaker';
import useSWR from 'swr'; import useSWR from 'swr';
export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) { export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSelectSingle }) {
@ -61,7 +61,7 @@ export default function MultiSelect({ className, title, options, selection, onTo
className="max-h-[35px] mx-2" className="max-h-[35px] mx-2"
onClick={() => onSelectSingle(item)} onClick={() => onSelectSingle(item)}
> >
{ (title === "Labels" && config.audio.listen.includes(item)) ? ( <AudioIcon /> ) : ( <CameraIcon /> ) } { (title === "Labels" && config.audio.listen.includes(item)) ? ( <SpeakerIcon /> ) : ( <CameraIcon /> ) }
</Button> </Button>
</div> </div>

View File

@ -1,7 +1,7 @@
import { h } from 'preact'; import { h } from 'preact';
import { memo } from 'preact/compat'; import { memo } from 'preact/compat';
export function Snapshot({ className = 'h-6 w-6', stroke = 'currentColor', onClick = () => {} }) { export function Audio({ className = 'h-6 w-6', stroke = 'currentColor', onClick = () => {} }) {
return ( return (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -33,19 +33,4 @@ export function Snapshot({ className = 'h-6 w-6', stroke = 'currentColor', onCli
); );
} }
export function AudioIcon({ export default memo(Audio);
className = 'h-7 w-7',
stroke = 'currentColor',
onClick = () => {},
}) {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"
stroke={stroke}
onClick={onClick}
className={className}>
<path stroke-linecap="round" stroke-linejoin="round" strokeWidth="2" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"/>
</svg>
);
}
export default memo(Snapshot);

20
web/src/icons/Speaker.jsx Normal file
View File

@ -0,0 +1,20 @@
import { h } from 'preact';
import { memo } from 'preact/compat';
export function Speaker({
className = 'h-7 w-7',
stroke = 'currentColor',
onClick = () => {},
}) {
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"
stroke={stroke}
onClick={onClick}
className={className}>
<path stroke-linecap="round" stroke-linejoin="round" strokeWidth="2" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"/>
</svg>
);
}
export default memo(Speaker);