From 94a4172568d9377e9456fd219d5ed272bed6a7da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=9C=9F=E5=B1=85=E5=81=A5=E5=A4=AA=E9=83=8E?= Date: Wed, 26 Mar 2025 20:45:03 +0900 Subject: [PATCH 1/5] add: Add component --- app/app.css | 1 + app/components/HeaderLink/HeaderLink.css | 47 +++++++++ .../HeaderLink/HeaderLink.stories.tsx | 87 +++++++++++++++++ app/components/HeaderLink/HeaderLink.tsx | 21 ++++ .../LanguageButton/LanguageButton.css | 19 ++++ .../LanguageButton/LanguageButton.stories.ts | 21 ++++ .../LanguageButton/LanguageButton.tsx | 23 +++++ app/components/LinkedButton/LinkedButton.css | 18 ++++ .../LinkedButton/LinkedButton.stories.ts | 96 +++++++++++++++++++ app/components/LinkedButton/LinkedButton.tsx | 46 +++++++++ app/i18n/ja.json | 3 + 11 files changed, 382 insertions(+) create mode 100644 app/components/HeaderLink/HeaderLink.css create mode 100644 app/components/HeaderLink/HeaderLink.stories.tsx create mode 100644 app/components/HeaderLink/HeaderLink.tsx create mode 100644 app/components/LanguageButton/LanguageButton.css create mode 100644 app/components/LanguageButton/LanguageButton.stories.ts create mode 100644 app/components/LanguageButton/LanguageButton.tsx create mode 100644 app/components/LinkedButton/LinkedButton.css create mode 100644 app/components/LinkedButton/LinkedButton.stories.ts create mode 100644 app/components/LinkedButton/LinkedButton.tsx diff --git a/app/app.css b/app/app.css index 4185f7a..4642493 100644 --- a/app/app.css +++ b/app/app.css @@ -11,6 +11,7 @@ --grey-text-color: #9D9F9F; --accent-color: #F5F5F5; --based-color: #242525; + --primery-color: #57B3E1; } html, diff --git a/app/components/HeaderLink/HeaderLink.css b/app/components/HeaderLink/HeaderLink.css new file mode 100644 index 0000000..d9856b0 --- /dev/null +++ b/app/components/HeaderLink/HeaderLink.css @@ -0,0 +1,47 @@ +.label { + color: #9D9F9F; + text-decoration: none; + font-size: 30px; + line-height: 100%; + position: relative; + font-family: 'Tilt Warp'; + font-weight: 400; + display: inline-block; + letter-spacing: 0.05em; + width: 79px; + height: 38px; + text-align: center; + vertical-align: middle; + transition: color 0.3s ease; +} + +.label::after { + content: ""; + position: absolute; + bottom: -5px; + left: 50%; + transform: translateX(-50%); + width: 120px; + height: 1px; + background-color: #F5F5F5; + opacity: 0; + transition: opacity 0.3s ease; +} + +.active .label { + color: #F5F5F5; +} + +.active .label::after { + opacity: 1; +} + +a { + background: transparent; + border: none; + padding: 0; + width: 79px; + height: 38px; + text-decoration: none; + display: inline-block; +} \ No newline at end of file diff --git a/app/components/HeaderLink/HeaderLink.stories.tsx b/app/components/HeaderLink/HeaderLink.stories.tsx new file mode 100644 index 0000000..9058cbf --- /dev/null +++ b/app/components/HeaderLink/HeaderLink.stories.tsx @@ -0,0 +1,87 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { HeaderLink } from './HeaderLink'; +import { BrowserRouter } from 'react-router-dom'; + + +const withRouter = (Story) => ( + + + +); + +const meta = { + title: 'Common/HeaderLink', + component: HeaderLink, + tags: ['autodocs'], + parameters: { + layout: 'centered', + }, + decorators: [withRouter], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Blog1: Story = { + args: { + label: 'Blog', + isActive: false, + to: '/' + }, +}; + +export const Blog2: Story = { + args: { + label: 'Blog', + isActive: true, + to: '/' + }, +}; + +export const Home1: Story = { + args: { + label: 'Home', + isActive: false, + to: '/' + }, +}; + +export const Home2: Story = { + args: { + label: 'Home', + isActive: true, + to: '/' + }, +}; + +export const Member1: Story = { + args: { + label: 'Member', + isActive: false, + to: '/member' + }, +}; + +export const Member2: Story = { + args: { + label: 'Member', + isActive: true, + to: '/member' + }, +}; + +export const Product1: Story = { + args: { + label: 'Product', + isActive: false, + to: '/product' + }, +}; + +export const Product2: Story = { + args: { + label: 'Product', + isActive: true, + to: '/product' + }, +}; \ No newline at end of file diff --git a/app/components/HeaderLink/HeaderLink.tsx b/app/components/HeaderLink/HeaderLink.tsx new file mode 100644 index 0000000..0c5a994 --- /dev/null +++ b/app/components/HeaderLink/HeaderLink.tsx @@ -0,0 +1,21 @@ +import { Link } from 'react-router-dom'; +import './HeaderLink.css'; + +export interface HeaderLinkProps { + isActive: boolean; + label: string; + to: string; +} + +export const HeaderLink = ({ + isActive, + label, + to, + ...props +}: HeaderLinkProps) => { + return ( + + {label} + + ); +} \ No newline at end of file diff --git a/app/components/LanguageButton/LanguageButton.css b/app/components/LanguageButton/LanguageButton.css new file mode 100644 index 0000000..f3aa6e2 --- /dev/null +++ b/app/components/LanguageButton/LanguageButton.css @@ -0,0 +1,19 @@ +.language-label { + width: auto; + font-family: 'Tilt Warp'; + font-weight: 400; + font-size: 30px; + line-height: 1; + color: #F5F5F5; +} + +.language-button { + border: 1px solid #F5F5F5; + border-radius: 5px; + width: 144px; + height: 55px; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; +} \ No newline at end of file diff --git a/app/components/LanguageButton/LanguageButton.stories.ts b/app/components/LanguageButton/LanguageButton.stories.ts new file mode 100644 index 0000000..05e3c32 --- /dev/null +++ b/app/components/LanguageButton/LanguageButton.stories.ts @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { LanguageButton } from './LanguageButton'; + +const meta = { + title: 'LanguageButton/LanguageButton', + component: LanguageButton, + tags: ['autodocs'], + parameters: { + layout: 'centered', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + + +export const Language: Story = { + args: { + label: 'JP', + }, +}; \ No newline at end of file diff --git a/app/components/LanguageButton/LanguageButton.tsx b/app/components/LanguageButton/LanguageButton.tsx new file mode 100644 index 0000000..e6f41db --- /dev/null +++ b/app/components/LanguageButton/LanguageButton.tsx @@ -0,0 +1,23 @@ +import { useTranslation } from 'react-i18next'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faGlobe } from "@fortawesome/free-solid-svg-icons"; +import './LanguageButton.css'; + +export interface LanguageButtonProps { + label: string; +} + +export const LanguageButton = ({ + label, + ...props +}: LanguageButtonProps) => { + const { t } = useTranslation(); + return ( + + ); +} \ No newline at end of file diff --git a/app/components/LinkedButton/LinkedButton.css b/app/components/LinkedButton/LinkedButton.css new file mode 100644 index 0000000..a914aae --- /dev/null +++ b/app/components/LinkedButton/LinkedButton.css @@ -0,0 +1,18 @@ +.Button-link { + width: 188px; + height: 45px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 40px; + border-radius: 5px; +} + +.Button-label { + font-family: 'Noto Sans JP'; + width: 97px; + height: 25px; + font-weight: 400; + font-size: 24px; + line-height: 100%; +} \ No newline at end of file diff --git a/app/components/LinkedButton/LinkedButton.stories.ts b/app/components/LinkedButton/LinkedButton.stories.ts new file mode 100644 index 0000000..1a032eb --- /dev/null +++ b/app/components/LinkedButton/LinkedButton.stories.ts @@ -0,0 +1,96 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { LinkedButton } from './LinkedButton'; + + +const meta = { + title: 'Common/LinkedButton', + component: LinkedButton, + tags: ['autodocs'], + parameters: { + layout: 'centered', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + + +export const Detail1: Story = { + args: { + url: 'https://example.com', + label: '詳細', + style: 'default', + backgroundColor: 'var(--primery-color)', + color: 'var(--accent-color)' + }, +}; + +export const Detail2: Story = { + args: { + url: 'https://example.com', + label: '詳細', + style: 'outlined', + backgroundColor: 'var(--primery-color)', + color: 'var(--accent-color)' + }, +}; + +export const Figma1: Story = { + args: { + url: 'https://www.figma.com/design/YWBtX9qhd0QKOTY4a2SEWx/Untitled?node-id=0-1&t=xTES000ahny4EJt1-1', + label: 'Figma', + style: 'default', + backgroundColor: 'var(--primery-color)', + color: 'var(--accent-color)' + }, +}; + +export const Figma2: Story = { + args: { + url: 'https://www.figma.com/design/YWBtX9qhd0QKOTY4a2SEWx/Untitled?node-id=0-1&t=xTES000ahny4EJt1-1', + label: 'Figma', + style: 'outlined', + backgroundColor: 'var(--primery-color)', + color: 'var(--accent-color)' + }, +}; + +export const Github1: Story = { + args: { + url: 'https://github.com/naoido/neko-bot', + label: 'Github', + style: 'default', + backgroundColor: 'var(--primery-color)', + color: 'var(--accent-color)' + }, +}; + +export const Github2: Story = { + args: { + url: 'https://github.com/naoido/neko-bot', + label: 'Github', + style: 'outlined', + backgroundColor: 'var(--primery-color)', + color: 'var(--accent-color)' + }, +}; + +export const List1: Story = { + args: { + url: 'https://example.com', + label: '一覧', + style: 'default', + backgroundColor: 'var(--primery-color)', + color: 'var(--accent-color)' + }, +}; + +export const List2: Story = { + args: { + url: 'https://example.com', + label: '一覧', + style: 'outlined', + backgroundColor: 'var(--primery-color)', + color: 'var(--accent-color)' + }, +}; \ No newline at end of file diff --git a/app/components/LinkedButton/LinkedButton.tsx b/app/components/LinkedButton/LinkedButton.tsx new file mode 100644 index 0000000..4e22a67 --- /dev/null +++ b/app/components/LinkedButton/LinkedButton.tsx @@ -0,0 +1,46 @@ +import { useTranslation } from 'react-i18next'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons"; +import './LinkedButton.css'; + +export interface LinkedButtonProps { + url: string; + label?: string; + backgroundColor?: string; + color?: string; + style?: "default" | "outlined"; +} + +export const LinkedButton = ({ + url, + label, + backgroundColor = "var(--primery-color)", + color = "var(--accent-color)", + style = "default", + ...props +}: LinkedButtonProps) => { + const { t } = useTranslation(); + + const linkStyle = { + backgroundColor: style === "default" ? backgroundColor : "transparent", + color: backgroundColor, + ...(style === "outlined" ? { + borderWidth: "0px 1px 1px 0px", + borderStyle: "solid", + borderColor: backgroundColor, + } : { + border: "none" + }) + }; + + const wordStyle = { + color: style === "default" ? color : backgroundColor + }; + + return ( + + {label} + + + ); +} \ No newline at end of file diff --git a/app/i18n/ja.json b/app/i18n/ja.json index 2dcced9..796d608 100644 --- a/app/i18n/ja.json +++ b/app/i18n/ja.json @@ -1,6 +1,9 @@ { + "language": "JP", "common": { "button": "ボタン", + "detail": "詳細", + "list": "一覧", "tags": { "hackathon": "ハッカソン", "recruitment": "募集", From d0c83324e3a8eaca7bc3ebaaa045858a12f12047 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=9C=9F=E5=B1=85=E5=81=A5=E5=A4=AA=E9=83=8E?= Date: Wed, 26 Mar 2025 20:47:35 +0900 Subject: [PATCH 2/5] add: font settings --- app/components/LanguageButton/LanguageButton.tsx | 2 -- app/components/LinkedButton/LinkedButton.tsx | 2 -- app/root.tsx | 4 ++++ 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/components/LanguageButton/LanguageButton.tsx b/app/components/LanguageButton/LanguageButton.tsx index e6f41db..7404db2 100644 --- a/app/components/LanguageButton/LanguageButton.tsx +++ b/app/components/LanguageButton/LanguageButton.tsx @@ -1,4 +1,3 @@ -import { useTranslation } from 'react-i18next'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faGlobe } from "@fortawesome/free-solid-svg-icons"; import './LanguageButton.css'; @@ -11,7 +10,6 @@ export const LanguageButton = ({ label, ...props }: LanguageButtonProps) => { - const { t } = useTranslation(); return (