chore: move social media from left panel into footer
This commit is contained in:
Faisal Amir
parent
c81f301b6c
commit
aecef0df5a
@ -9,7 +9,7 @@ export default function SystemItem({ name, value }: Props) {
|
||||
return (
|
||||
<div className="flex items-center gap-x-1">
|
||||
<p className="text-xs">{name}</p>
|
||||
<span className="text-xs">{value}</span>
|
||||
<span className="text-xs font-bold">{value}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,6 +1,15 @@
|
||||
import { Badge, Button } from '@janhq/uikit'
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Tooltip,
|
||||
TooltipArrow,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from '@janhq/uikit'
|
||||
import { useAtomValue } from 'jotai'
|
||||
|
||||
import { FaGithub, FaDiscord } from 'react-icons/fa'
|
||||
|
||||
import DownloadingState from '@/containers/Layout/BottomBar/DownloadingState'
|
||||
|
||||
import SystemItem from '@/containers/Layout/BottomBar/SystemItem'
|
||||
@ -27,6 +36,19 @@ const BottomBar = () => {
|
||||
const { setMainViewState } = useMainViewState()
|
||||
const { downloadStates } = useDownloadState()
|
||||
|
||||
const linksMenu = [
|
||||
{
|
||||
name: 'Discord',
|
||||
icon: <FaDiscord size={20} className="flex-shrink-0" />,
|
||||
link: 'https://discord.gg/FTk2MvZwJH',
|
||||
},
|
||||
{
|
||||
name: 'Github',
|
||||
icon: <FaGithub size={16} className="flex-shrink-0" />,
|
||||
link: 'https://github.com/janhq/jan',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-16 z-20 flex h-12 w-[calc(100%-64px)] items-center justify-between border-t border-border bg-background/80 px-3">
|
||||
<div className="flex flex-shrink-0 items-center gap-x-2">
|
||||
@ -69,11 +91,39 @@ const BottomBar = () => {
|
||||
|
||||
<DownloadingState />
|
||||
</div>
|
||||
<div className="flex gap-x-2">
|
||||
<SystemItem name="CPU:" value={`${cpu}%`} />
|
||||
<SystemItem name="Mem:" value={`${ram}%`} />
|
||||
<div className="flex items-center gap-x-4">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<SystemItem name="CPU:" value={`${cpu}%`} />
|
||||
<SystemItem name="Mem:" value={`${ram}%`} />
|
||||
</div>
|
||||
{/* VERSION is defined by webpack, please see next.config.js */}
|
||||
<span className="text-xs font-semibold ">Jan v{VERSION ?? ''}</span>
|
||||
<span className="text-xs">Jan v{VERSION ?? ''}</span>
|
||||
<div className="mt-1 flex items-center gap-x-2">
|
||||
{linksMenu
|
||||
.filter((link) => !!link)
|
||||
.map((link, i) => {
|
||||
return (
|
||||
<div className="relative" key={i}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<a
|
||||
href={link.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center"
|
||||
>
|
||||
{link.icon}
|
||||
</a>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top" sideOffset={10}>
|
||||
<span>{link.name}</span>
|
||||
<TooltipArrow />
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -11,8 +11,6 @@ import {
|
||||
SettingsIcon,
|
||||
MonitorIcon,
|
||||
LayoutGridIcon,
|
||||
Twitter,
|
||||
Github,
|
||||
} from 'lucide-react'
|
||||
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
@ -54,23 +52,6 @@ export default function RibbonNav() {
|
||||
},
|
||||
]
|
||||
|
||||
const linksMenu = [
|
||||
{
|
||||
name: 'Twitter',
|
||||
icon: (
|
||||
<Twitter size={20} className="flex-shrink-0 text-muted-foreground" />
|
||||
),
|
||||
link: 'https://twitter.com/janhq_',
|
||||
},
|
||||
{
|
||||
name: 'Github',
|
||||
icon: (
|
||||
<Github size={20} className="flex-shrink-0 text-muted-foreground" />
|
||||
),
|
||||
link: 'https://github.com/janhq/jan',
|
||||
},
|
||||
]
|
||||
|
||||
const secondaryMenus = [
|
||||
{
|
||||
name: 'System Monitor',
|
||||
@ -138,33 +119,6 @@ export default function RibbonNav() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<>
|
||||
{linksMenu
|
||||
.filter((link) => !!link)
|
||||
.map((link, i) => {
|
||||
return (
|
||||
<div className="relative flex p-2" key={i}>
|
||||
<Tooltip>
|
||||
<TooltipTrigger>
|
||||
<a
|
||||
href={link.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center"
|
||||
>
|
||||
{link.icon}
|
||||
</a>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="right" sideOffset={10}>
|
||||
<span>{link.name}</span>
|
||||
<TooltipArrow />
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
|
||||
{secondaryMenus
|
||||
.filter((secondary) => !!secondary)
|
||||
.map((secondary, i) => {
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
"react-dom": "18.2.0",
|
||||
"react-hook-form": "^7.47.0",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"react-icons": "^4.12.0",
|
||||
"react-scroll-to-bottom": "^4.2.0",
|
||||
"react-toastify": "^9.1.3",
|
||||
"sass": "^1.69.4",
|
||||
@ -49,6 +50,7 @@
|
||||
"@types/node": "20.8.10",
|
||||
"@types/react": "18.2.34",
|
||||
"@types/react-dom": "18.2.14",
|
||||
"@types/react-icons": "^3.0.0",
|
||||
"@types/react-scroll-to-bottom": "^4.2.4",
|
||||
"@types/uuid": "^9.0.6",
|
||||
"@typescript-eslint/eslint-plugin": "^6.8.0",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user