mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests 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,
faCog as fasCog,
} from "@fortawesome/pro-solid-svg-icons";
import {
faPhoneAlt as farPhone,
faTh as farTh,
faComments as farComments,
faCog as farCog,
} from "@fortawesome/pro-regular-svg-icons";
import clsx from "clsx";
export default function Footer() {
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
label="Calls"
path="/calls"
icons={{
active: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasPhone} />,
inactive: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={farPhone} />,
}}
icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasPhone} />}
/>
<NavLink
label="Keypad"
path="/keypad"
icons={{
active: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasTh} />,
inactive: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={farTh} />,
}}
icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasTh} />}
/>
<NavLink
label="Messages"
path="/messages"
icons={{
active: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasComments} />,
inactive: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={farComments} />,
}}
icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasComments} />}
/>
<NavLink
label="Settings"
path="/settings"
icons={{
active: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasCog} />,
inactive: <FontAwesomeIcon size="lg" className="w-6 h-6" icon={farCog} />,
}}
icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasCog} />}
/>
</footer>
);
@ -56,21 +42,22 @@ export default function Footer() {
type NavLinkProps = {
path: string;
label: string;
icons: {
active: ReactNode;
inactive: ReactNode;
};
icon: ReactNode;
};
function NavLink({ path, label, icons }: NavLinkProps) {
function NavLink({ path, label, icon }: NavLinkProps) {
const router = useRouter();
const isActiveRoute = router.pathname.startsWith(path);
const icon = isActiveRoute ? icons.active : icons.inactive;
return (
<div className="flex flex-col items-center justify-around h-full">
<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}
<span className="text-xs">{label}</span>
</a>