mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style footer

Browse Source
This commit is contained in:
m5r 2021-08-31 05:15:30 +08:00
parent d71e4de033
commit dee1bc4697
1 changed files with 17 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/core/layouts/layout/footer.tsx
View File

@ -7,47 +7,33 @@ import {
faComments as fasComments, faComments as fasComments,
faCog as fasCog, faCog as fasCog,
} from "@fortawesome/pro-solid-svg-icons"; } from "@fortawesome/pro-solid-svg-icons";
import { import clsx from "clsx";
faPhoneAlt as farPhone,
faTh as farTh,
faComments as farComments,
faCog as farCog,
} from "@fortawesome/pro-regular-svg-icons";
export default function Footer() { export default function Footer() {
return ( return (
<footer className="grid grid-cols-4" style={{ flex: "0 0 50px" }}> <footer
className="grid grid-cols-4 bg-[#F7F7F7] border-t border-gray-400 border-opacity-25 py-3"
style={{ flex: "0 0 50px" }}
>
<NavLink <NavLink
label="Calls" label="Calls"
path="/calls" path="/calls"
icons={{ icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasPhone} />}
active: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasPhone} />,
inactive: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={farPhone} />,
}}
/> />
<NavLink <NavLink
label="Keypad" label="Keypad"
path="/keypad" path="/keypad"
icons={{ icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasTh} />}
active: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasTh} />,
inactive: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={farTh} />,
}}
/> />
<NavLink <NavLink
label="Messages" label="Messages"
path="/messages" path="/messages"
icons={{ icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasComments} />}
active: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasComments} />,
inactive: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={farComments} />,
}}
/> />
<NavLink <NavLink
label="Settings" label="Settings"
path="/settings" path="/settings"
icons={{ icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasCog} />}
active: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasCog} />,
inactive: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={farCog} />,
}}
/> />
</footer> </footer>
); );
@ -56,21 +42,22 @@ export default function Footer() {
type NavLinkProps = { type NavLinkProps = {
path: string; path: string;
label: string; label: string;
icons: { icon: ReactNode;
active: ReactNode;
inactive: ReactNode;
};
}; };
function NavLink({ path, label, icons }: NavLinkProps) { function NavLink({ path, label, icon }: NavLinkProps) {
const router = useRouter(); const router = useRouter();
const isActiveRoute = router.pathname.startsWith(path); const isActiveRoute = router.pathname.startsWith(path);
const icon = isActiveRoute ? icons.active : icons.inactive;
return ( return (
<div className="flex flex-col items-center justify-around h-full"> <div className="flex flex-col items-center justify-around h-full">
<Link href={path}> <Link href={path}>
<a className="flex flex-col items-center"> <a
className={clsx("flex flex-col items-center", {
"text-[#007AFF]": isActiveRoute,
"text-[#959595]": !isActiveRoute,
})}
>
{icon} {icon}
<span className="text-xs">{label}</span> <span className="text-xs">{label}</span>
</a> </a>