Skip to content

Commit

Permalink
feat: add nav list to mobile nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@limsohee1002
limsohee1002 committed Nov 7, 2024
1 parent afba82d commit cfebd1d
Show file tree
Hide file tree
Showing 13 changed files with 470 additions and 210 deletions.
39 changes: 18 additions & 21 deletions assets/navigation-bundle.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

55 changes: 39 additions & 16 deletions assets/tailwind-output.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

108 changes: 44 additions & 64 deletions src/base/Button/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { FC, PropsWithChildren } from "react";
import { FC, PropsWithChildren } from 'react';

import cn from "classnames";
import { Theme } from "../../utils/storage";
import React from "react";
import cn from 'classnames';
import { Theme } from '../../utils/storage';
import React from 'react';

function isValidEmail(href: string): boolean {
// Regular expression to validate email address
Expand All @@ -14,7 +14,7 @@ function formatHrefAsMailto(href: string): string {
// Check if the href is a valid email address
if (isValidEmail(href)) {
// If it doesn't already start with "mailto:", add it
if (!href.startsWith("mailto:")) {
if (!href.startsWith('mailto:')) {
return `mailto:${href}`;
}
}
Expand All @@ -24,72 +24,57 @@ function formatHrefAsMailto(href: string): string {

interface PrimaryButtonProps extends ButtonBaseProps {
label: string;
color?: "accent-1" | "accent-2";
size?: "medium" | "large";
color?: 'accent-1' | 'accent-2';
size?: 'medium' | 'large';
fullWidth?: boolean;
theme?: Theme;
}

interface PrimaryLinkProps extends LinkBaseProps {
label: string;
color?: "accent-1" | "accent-2" | "surface-3";
size?: "medium" | "large";
color?: 'accent-1' | 'accent-2' | 'surface-3';
size?: 'medium' | 'large';
fullWidth?: boolean;
theme?: Theme;
}

export const PrimaryButton: FC<PrimaryLinkProps | PrimaryButtonProps> = (
props
) => {
const {
color = "accent-1",
size = "medium",
fullWidth = false,
theme,
} = props;
const containerStyle = cn(
"transition-colors flex flex-row items-center justify-center",
{
"bg-light-accent-1 dark:bg-dark-accent-1 hover:bg-light-accent-1-hovered dark:hover:bg-dark-accent-1-hovered":
!theme && color === "accent-1",
"bg-light-accent-2 dark:bg-dark-accent-2 hover:bg-light-accent-2-hovered dark:hover:bg-dark-accent-2-hovered":
!theme && color === "accent-2",
"bg-light-surface-3 dark:bg-dark-surface-3 hover:bg-light-surface-3-hovered dark:hover:bg-dark-surface-3-hovered":
!theme && color === "surface-3",
"bg-dark-accent-1 hover:bg-dark-accent-1-hovered":
theme === "dark" && color === "accent-1",
"bg-light-accent-1 hover:bg-light-accent-1-hovered":
theme === "light" && color === "accent-1",
"bg-dark-accent-2 hover:bg-dark-accent-2-hovered":
theme === "dark" && color === "accent-2",
"bg-light-accent-2 hover:bg-light-accent-2-hovered":
theme === "light" && color === "accent-2",
"rounded-small px-padding-small py-padding-small-dense":
size === "medium",
"rounded-medium px-padding-large p-padding-medium": size === "large",
}
);
export const PrimaryButton: FC<PrimaryLinkProps | PrimaryButtonProps> = (props) => {
const { color = 'accent-1', size = 'medium', fullWidth = false, theme } = props;
const containerStyle = cn('transition-colors flex flex-row items-center justify-center', {
'bg-light-accent-1 dark:bg-dark-accent-1 hover:bg-light-accent-1-hovered dark:hover:bg-dark-accent-1-hovered':
!theme && color === 'accent-1',
'bg-light-accent-2 dark:bg-dark-accent-2 hover:bg-light-accent-2-hovered dark:hover:bg-dark-accent-2-hovered':
!theme && color === 'accent-2',
'bg-light-surface-3 dark:bg-dark-surface-3 hover:bg-light-surface-3-hovered dark:hover:bg-dark-surface-3-hovered':
!theme && color === 'surface-3',
'bg-dark-accent-1 hover:bg-dark-accent-1-hovered': theme === 'dark' && color === 'accent-1',
'bg-light-accent-1 hover:bg-light-accent-1-hovered': theme === 'light' && color === 'accent-1',
'bg-dark-accent-2 hover:bg-dark-accent-2-hovered': theme === 'dark' && color === 'accent-2',
'bg-light-accent-2 hover:bg-light-accent-2-hovered': theme === 'light' && color === 'accent-2',
'rounded-small px-padding-small py-padding-small-dense': size === 'medium',
'rounded-medium px-padding-large p-padding-medium': size === 'large',
});
const textStyle = cn({
"text-white": color === "accent-1",
"text-light-accent-1 dark:text-dark-accent-1": color === "accent-2",
"text-light-neutral-1 dark:text-dark-neutral-1": color === "surface-3",
"button-label-4": size === "medium",
"button-label-2": size === "large",
'text-white': color === 'accent-1',
'text-light-accent-1 dark:text-dark-accent-1': color === 'accent-2',
'text-light-neutral-1 dark:text-dark-neutral-1': color === 'surface-3',
'button-label-4': size === 'medium',
'button-label-2': size === 'large',
});

if ("href" in props) {
if ('href' in props) {
const { label, href, ariaLabel, className, onClick } = props;

return (
<div
className={cn("PrimaryButton flex", {
"w-full": fullWidth,
className={cn('PrimaryButton flex', {
'w-full': fullWidth,
})}
>
<LinkBase
href={href}
className={cn(containerStyle, className, {
"w-full": fullWidth,
'w-full': fullWidth,
})}
ariaLabel={ariaLabel}
onClick={onClick}
Expand Down Expand Up @@ -127,11 +112,11 @@ interface TextLinkProps extends LinkBaseProps {
}

export const TextButton: FC<TextButtonProps | TextLinkProps> = (props) => {
const containerStyle = "TextButton group";
const textStyle = "decoration-inherit";
const containerStyle = 'TextButton group';
const textStyle = 'decoration-inherit';
const textClassName = props.textClassName;

if ("href" in props) {
if ('href' in props) {
const { label, href, ariaLabel, className, onClick } = props;

return (
Expand Down Expand Up @@ -165,6 +150,7 @@ type ButtonBaseProps = {
onClick?: () => void;
ariaLabel?: string;
role?: string;
id?: string;
};

export const ButtonBase: FC<PropsWithChildren<ButtonBaseProps>> = ({
Expand All @@ -173,14 +159,10 @@ export const ButtonBase: FC<PropsWithChildren<ButtonBaseProps>> = ({
children,
ariaLabel,
role,
id,
}) => {
return (
<button
onClick={onClick}
className={className}
aria-label={ariaLabel}
role={role}
>
<button id={id} onClick={onClick} className={className} aria-label={ariaLabel} role={role}>
{children}
</button>
);
Expand All @@ -193,8 +175,8 @@ type LinkBaseProps = {
onClick?: () => void;
};

const OPEN_IN_NEW_TAB_PROPS = { target: "_blank", rel: "noreferrer noopener" };
const OPEN_IN_CURRENT_TAB_PROPS = { target: "_self" };
const OPEN_IN_NEW_TAB_PROPS = { target: '_blank', rel: 'noreferrer noopener' };
const OPEN_IN_CURRENT_TAB_PROPS = { target: '_self' };

export const LinkBase: FC<PropsWithChildren<LinkBaseProps>> = ({
className,
Expand All @@ -203,10 +185,8 @@ export const LinkBase: FC<PropsWithChildren<LinkBaseProps>> = ({
ariaLabel,
onClick,
}) => {
const isInternalLink = href.startsWith("/") || href.startsWith("#");
const targetProps = isInternalLink
? OPEN_IN_CURRENT_TAB_PROPS
: OPEN_IN_NEW_TAB_PROPS;
const isInternalLink = href.startsWith('/') || href.startsWith('#');
const targetProps = isInternalLink ? OPEN_IN_CURRENT_TAB_PROPS : OPEN_IN_NEW_TAB_PROPS;

return (
<a
Expand Down
Loading

0 comments on commit cfebd1d

Please sign in to comment.