Skip to content

Commit

Permalink
feat: add CrossLink component
Browse files Browse the repository at this point in the history
  • Loading branch information
HinataKah0 committed Sep 10, 2023
1 parent eeddb43 commit 910e729
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 0 deletions.
25 changes: 25 additions & 0 deletions components/Common/CrossLink/index.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.crossLink {
@apply flex flex-col items-start p-3 gap-2 bg-white dark:bg-black
border border-solid border-neutral-300 dark:border-neutral-900 rounded;

.header {
@apply flex items-center self-stretch gap-2
text-xs text-neutral-800 dark:text-neutral-100;

&.right {
@apply justify-end;
}

.icon {
@apply h-4 w-4 text-neutral-600 dark:text-neutral-400;
}
}

.content {
@apply text-sm truncate text-neutral-900 dark:text-white self-stretch;

&.right {
@apply text-right;
}
}
}
47 changes: 47 additions & 0 deletions components/Common/CrossLink/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
import CrossLink from './index';

type Story = StoryObj<typeof CrossLink>;
type Meta = MetaObj<typeof CrossLink>;

export const Prev: Story = {
args: {
direction: 'left',
text: 'How to install Node.js',
url: 'https://nodejs.dev/en/learn/how-to-install-nodejs/',
},
};

export const Next: Story = {
args: {
direction: 'right',
text: 'How much JavaScript do you need to know to use Node.js?',
url: 'https://nodejs.dev/en/learn/how-much-javascript-do-you-need-to-know-to-use-nodejs/',
},
};

export const PrevDark: Story = {
render: () => (
<div data-theme="dark" className="w-80 bg-black p-2">
<CrossLink
direction="left"
text="How to install Node.js"
url="https://nodejs.dev/en/learn/how-to-install-nodejs/"
/>
</div>
),
};

export const NextDark: Story = {
render: () => (
<div data-theme="dark" className="w-80 bg-black p-2">
<CrossLink
direction="right"
text="How much JavaScript do you need to know to use Node.js?"
url="https://nodejs.dev/en/learn/how-much-javascript-do-you-need-to-know-to-use-nodejs/"
/>
</div>
),
};

export default { component: CrossLink } as Meta;
40 changes: 40 additions & 0 deletions components/Common/CrossLink/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import styles from './index.module.scss';
import Link from 'next/link';
import classNames from 'classnames';
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/solid';
import { FormattedMessage } from 'react-intl';
import type { FC } from 'react';

type CrossLinkProps = {
direction: 'left' | 'right';
text: string;
url: string;
};

const CrossLink: FC<CrossLinkProps> = ({ direction, text, url }) => {
const contentClasses = classNames(styles['content'], {
[styles['right']]: direction === 'right',
});

return (
<Link className={styles.crossLink} href={url}>
{direction === 'left' && (
<div className={styles.header}>
<ChevronLeftIcon className={styles.icon} />
<FormattedMessage id="components.common.crossLink.prev" />
</div>
)}

{direction === 'right' && (
<div className={`${styles.header} ${styles.right}`}>
<FormattedMessage id="components.common.crossLink.next" />
<ChevronRightIcon className={styles.icon} />
</div>
)}

<div className={contentClasses}>{text}</div>
</Link>
);
};

export default CrossLink;
2 changes: 2 additions & 0 deletions i18n/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@
"components.header.buttons.toggleDarkMode": "Toggle dark/light mode",
"components.pagination.next": "Newer | ",
"components.pagination.previous": "Older",
"components.common.crossLink.prev": "Prev",
"components.common.crossLink.next": "Next",
"layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
"layouts.blogIndex.currentYear": "News from {year}",
"components.api.jsonLink.title": "View as JSON",
Expand Down

0 comments on commit 910e729

Please sign in to comment.