dd8187d6da
* fix(sidebar): increase sidebar button hitbox * chore(ui): change hitbox area for plus button * chore(ui): update size of hitbox area * fix: fix pnpm version conflict * fix: pnpm version conflict * chore(ui): update size of hitbox area for the social links * feat: calendar footer story --------- Co-authored-by: doprz <52579214+doprz@users.noreply.github.com> Co-authored-by: Samuel Gunter <29130894+Samathingamajig@users.noreply.github.com> Co-authored-by: Derek <derex1987@gmail.com>
66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { GearSix } from '@phosphor-icons/react';
|
|
import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
|
|
import React from 'react';
|
|
|
|
import DiscordIcon from '~icons/bi/discord';
|
|
import GithubIcon from '~icons/ri/github-fill';
|
|
import InstagramIcon from '~icons/ri/instagram-line';
|
|
import LinkedinIcon from '~icons/ri/linkedin-box-fill';
|
|
|
|
import { Button } from '../common/Button';
|
|
import Link from '../common/Link';
|
|
|
|
interface SocialLink {
|
|
icon: React.FC<React.SVGProps<SVGSVGElement>>;
|
|
url: string;
|
|
}
|
|
|
|
const socialLinks: SocialLink[] = [
|
|
{
|
|
icon: InstagramIcon,
|
|
url: 'https://www.instagram.com/longhorndevelopers',
|
|
},
|
|
{
|
|
icon: DiscordIcon,
|
|
url: 'https://discord.gg/7pQDBGdmb7',
|
|
},
|
|
{
|
|
icon: GithubIcon,
|
|
url: 'https://github.com/Longhorn-Developers',
|
|
},
|
|
{
|
|
icon: LinkedinIcon,
|
|
url: 'https://www.linkedin.com/company/longhorn-developers/posts/?feedView=all',
|
|
},
|
|
];
|
|
|
|
/**
|
|
* Opens the options page in a new tab.
|
|
* @returns A promise that resolves when the options page is opened.
|
|
*/
|
|
const handleOpenOptions = async (): Promise<void> => {
|
|
const url = chrome.runtime.getURL('/options.html');
|
|
await openTabFromContentScript(url);
|
|
};
|
|
|
|
/**
|
|
* The footer section of the calendar's sidebar
|
|
* @returns
|
|
*/
|
|
export default function CalendarFooter(): JSX.Element {
|
|
return (
|
|
<footer className='min-w-full w-0 flex items-center justify-between bg-white px-spacing-8 pt-spacing-4'>
|
|
<div className='flex gap-spacing-5'>
|
|
{socialLinks.map(({ icon: Icon, url }) => (
|
|
<Link className='linkanimate' href={url}>
|
|
<Icon className='h-6 w-6' />
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div>
|
|
<Button variant='minimal' size='small' icon={GearSix} color='ut-black' onClick={handleOpenOptions} />
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|