This repository has been archived by the owner on Jan 7, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
C
committed
Jan 30, 2023
1 parent
d3fa482
commit fc2dfee
Showing
8 changed files
with
887 additions
and
494 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import Link from 'next/link'; | ||
| import React from 'react'; | ||
| import { cn } from 'utils'; | ||
|
|
||
| /** | ||
| * Properties for a card component. | ||
| */ | ||
| type TextProps = { | ||
| variant: | ||
| | 'big-heading' | ||
| | 'heading' | ||
| | 'sub-heading' | ||
| | 'nav-heading' | ||
| | 'nav' | ||
| | 'input' | ||
| | 'label'; | ||
| className?: string; | ||
| href?: string; | ||
| children?: React.ReactNode; | ||
| id?: string; | ||
| }; | ||
|
|
||
| /** | ||
| * Pre-defined styling, according to agreed-upon design-system. | ||
| */ | ||
| const variants = { | ||
| heading: 'text-3xl font-medium', | ||
| 'sub-heading': 'text-2xl font-medium', | ||
| 'nav-heading': 'text-lg font-medium sm:text-xl', | ||
| nav: 'font-medium', | ||
| paragraph: 'text-lg', | ||
| 'sub-paragraph': 'text-base font-medium text-inherit', | ||
| input: 'text-sm uppercase tracking-wide', | ||
| label: 'text-xs uppercase tracking-wide', | ||
| }; | ||
|
|
||
| /** | ||
| * Definition of a card component,the main purpose of | ||
| * which is to neatly display information. Can be both | ||
| * interactive and static. | ||
| * | ||
| * @param variant Variations relating to pre-defined styling of the element. | ||
| * @param className Custom classes to be applied to the element. | ||
| * @param children Child elements to be rendered within the component. | ||
| */ | ||
| const Text = ({ variant, className, href, children }: TextProps) => ( | ||
| <p className={cn(className, variants[variant])}> | ||
| {href ? ( | ||
| <Link href={href} className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"> | ||
| {children} | ||
| </Link> | ||
| ) : ( | ||
| children | ||
| )} | ||
| </p> | ||
| ); | ||
|
|
||
| export default Text; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| /* tslint:disable:no-empty */ | ||
| import Link from 'next/link'; | ||
| import Text from '../Text'; | ||
| import { cn } from '../../utils'; | ||
| import { useRouter } from 'next/router'; | ||
| import { useEffect, useRef } from 'react'; | ||
|
|
||
| type NavElementProps = { | ||
| label: string; | ||
| href: string; | ||
| as?: string; | ||
| scroll?: boolean; | ||
| chipLabel?: string; | ||
| disabled?: boolean; | ||
| navigationStarts?: () => void; | ||
| }; | ||
|
|
||
| const NavElement = ({ | ||
| label, | ||
| href, | ||
| as, | ||
| scroll, | ||
| disabled, | ||
| navigationStarts = () => {}, | ||
| }: NavElementProps) => { | ||
| const router = useRouter(); | ||
| const isActive = href === router.asPath || (as && as === router.asPath); | ||
| const divRef = useRef<HTMLDivElement | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| if (divRef.current) { | ||
| divRef.current.className = cn( | ||
| 'h-0.5 w-1/4 transition-all duration-300 ease-out', | ||
| isActive | ||
| ? '!w-full bg-gradient-to-l from-fuchsia-500 to-pink-500 ' | ||
| : 'group-hover:w-1/2 group-hover:bg-fuchsia-500', | ||
| ); | ||
| } | ||
| }, [isActive]); | ||
|
|
||
| return ( | ||
| <Link | ||
| href={href} | ||
| as={as} | ||
| scroll={scroll} | ||
| passHref | ||
| className={cn( | ||
| 'group flex h-full flex-col items-center justify-between', | ||
| disabled && | ||
| 'pointer-events-none cursor-not-allowed opacity-50', | ||
| )} | ||
| onClick={() => navigationStarts()} | ||
| > | ||
| <div className="flex flex-row items-center gap-3"> | ||
| <Text variant="nav-heading"> {label} </Text> | ||
| </div> | ||
| <div ref={divRef} /> | ||
| </Link> | ||
| ); | ||
| }; | ||
|
|
||
| export default NavElement; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { format } from 'date-fns'; | ||
|
|
||
| // Concatenates classes into a single className string | ||
| const cn = (...args: string[]) => args.join(' '); | ||
|
|
||
| const formatDate = (date: string) => format(new Date(date), 'MM/dd/yyyy h:mm:ss'); | ||
|
|
||
| /** | ||
| * Formats number as currency string. | ||
| * | ||
| * @param number Number to format. | ||
| */ | ||
| const numberToCurrencyString = (number: number) => | ||
| number.toLocaleString('en-US'); | ||
|
|
||
| /** | ||
| * Returns a number whose value is limited to the given range. | ||
| * | ||
| * Example: limit the output of this computation to between 0 and 255 | ||
| * (x * 255).clamp(0, 255) | ||
| * | ||
| * @param {Number} min The lower boundary of the output range | ||
| * @param {Number} max The upper boundary of the output range | ||
| * @returns A number in the range [min, max] | ||
| * @type Number | ||
| */ | ||
| const clamp = (current, min, max) => Math.min(Math.max(current, min), max); | ||
|
|
||
| export { | ||
| cn, | ||
| formatDate, | ||
| numberToCurrencyString, | ||
| clamp, | ||
| }; |
Oops, something went wrong.