Standardize app info icon
This commit is contained in:
parent
bd7cf64f2a
commit
13867f7089
@ -4,8 +4,10 @@ import { FaCircle } from 'react-icons/fa6';
|
||||
import { LuCog } from 'react-icons/lu';
|
||||
|
||||
export default function AdminAppInfoIcon({
|
||||
size = 'large',
|
||||
className,
|
||||
}: {
|
||||
size?: 'small' | 'large'
|
||||
className?: string
|
||||
}) {
|
||||
const { insightIndicatorStatus } = useAppState();
|
||||
@ -16,16 +18,16 @@ export default function AdminAppInfoIcon({
|
||||
className,
|
||||
)}>
|
||||
<LuCog
|
||||
size={20}
|
||||
size={size === 'large' ? 20 : 18}
|
||||
className="inline-flex translate-y-[1px]"
|
||||
aria-label="App Info"
|
||||
/>
|
||||
{insightIndicatorStatus &&
|
||||
<FaCircle
|
||||
size={8}
|
||||
size={size === 'large' ? 8 : 7}
|
||||
className={clsx(
|
||||
'absolute',
|
||||
'top-[2px] right-[0.5px]',
|
||||
'top-[1.5px] right-[0.5px]',
|
||||
insightIndicatorStatus === 'blue'
|
||||
? 'text-blue-500'
|
||||
: 'text-amber-500',
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
|
||||
import MoreMenu from '@/components/more/MoreMenu';
|
||||
import {
|
||||
PATH_ADMIN_CONFIGURATION,
|
||||
PATH_ADMIN_INSIGHTS,
|
||||
PATH_ADMIN_PHOTOS,
|
||||
PATH_ADMIN_TAGS,
|
||||
@ -11,12 +10,11 @@ import {
|
||||
import { useAppState } from '@/state/AppState';
|
||||
import { ImCheckboxUnchecked } from 'react-icons/im';
|
||||
import { IoCloseSharp } from 'react-icons/io5';
|
||||
import { LuCog } from 'react-icons/lu';
|
||||
import { clsx } from 'clsx/lite';
|
||||
import { TbPhoto } from 'react-icons/tb';
|
||||
import { FiTag } from 'react-icons/fi';
|
||||
import { BiLockAlt } from 'react-icons/bi';
|
||||
import AdminAppInsightsIcon from './insights/AdminAppInsightsIcon';
|
||||
import AdminAppInfoIcon from './AdminAppInfoIcon';
|
||||
|
||||
export default function AdminAppMenu({
|
||||
className,
|
||||
@ -60,15 +58,12 @@ export default function AdminAppMenu({
|
||||
/>,
|
||||
href: PATH_ADMIN_TAGS,
|
||||
}, {
|
||||
label: 'Insights',
|
||||
icon: <AdminAppInsightsIcon className="translate-y-[-4px]" />,
|
||||
href: PATH_ADMIN_INSIGHTS,
|
||||
}, {
|
||||
label: 'Configuration',
|
||||
icon: <LuCog
|
||||
className="text-[17px] translate-x-[0.5px] translate-y-[0.5px]"
|
||||
label: 'App Info',
|
||||
icon: <AdminAppInfoIcon
|
||||
size="small"
|
||||
className="translate-x-[1px] translate-y-[-0.5px]"
|
||||
/>,
|
||||
href: PATH_ADMIN_CONFIGURATION,
|
||||
href: PATH_ADMIN_INSIGHTS,
|
||||
}, {
|
||||
label: isSelecting
|
||||
? 'Exit Select'
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
import { useAppState } from '@/state/AppState';
|
||||
import clsx from 'clsx/lite';
|
||||
import { LuLightbulb } from 'react-icons/lu';
|
||||
import { FaCircle } from 'react-icons/fa6';
|
||||
export default function AdminAppInsightsIcon({
|
||||
className,
|
||||
}: {
|
||||
className?: string
|
||||
}) {
|
||||
const {
|
||||
insightIndicatorStatus,
|
||||
} = useAppState();
|
||||
|
||||
return (
|
||||
<span className={clsx(
|
||||
'inline-flex relative',
|
||||
className,
|
||||
)}>
|
||||
<LuLightbulb
|
||||
size={18}
|
||||
className="translate-y-[3.5px]"
|
||||
/>
|
||||
{insightIndicatorStatus &&
|
||||
<FaCircle
|
||||
size={8}
|
||||
className={clsx(
|
||||
'absolute',
|
||||
'top-[2px] right-[0.5px]',
|
||||
insightIndicatorStatus === 'blue'
|
||||
? 'text-blue-500'
|
||||
: 'text-amber-500',
|
||||
)}
|
||||
/>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user