Feature/23 linked icon

app/app.css

@@ -11,6 +11,7 @@
   --grey-text-color: #9D9F9F;
   --accent-color: #F5F5F5;
   --based-color: #242525;
+  --primery-color: #57B3E1;
 }
 
 html,

app/components/HeaderLink/HeaderLink.css

@@ -0,0 +1,44 @@
+.label {
+    color: #9D9F9F;
+    text-decoration: none;
+    font-size: 30px;
+    line-height: 100%;
+    position: relative;
+    font-weight: 400;
+    display: inline-block;
+    letter-spacing: 0.05em;
+    height: 38px;
+    text-align: center;
+    vertical-align: middle;
+    transition: color 0.3s ease;
+}
+
+.label::after {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #F5F5F5;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.active .label {
+    color: #F5F5F5;
+}
+
+.active .label::after {
+    opacity: 1;
+}
+
+a.Header-link {
+    background: transparent;
+    border: none;
+    padding: 0;
+    height: 38px;
+    text-decoration: none;
+    display: inline-block;
+    padding: 0 10px;
+}

app/components/HeaderLink/HeaderLink.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { HeaderLink } from './HeaderLink';
+import { BrowserRouter } from 'react-router-dom';
+
+
+const withRouter = (Story) => (
+    <BrowserRouter>
+        <Story />
+    </BrowserRouter>
+);
+
+const meta = {
+    title: 'Common/HeaderLink',
+    component: HeaderLink,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [withRouter],
+} satisfies Meta<typeof HeaderLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Blog',
+        isActive: false,
+        to: '/'
+    },
+};
+
+export const HeaderLinkActive: Story = {
+    args: {
+        label: 'Blog',
+        isActive: true,
+        to: '/'
+    },
+};
+

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 (
+        <Link to={to} className={`Header-link ${isActive ? 'active' : ''}`} {...props}>
+            <span className="label">{label}</span>
+        </Link>
+    );
+}

app/components/LanguageButton/LanguageButton.css

@@ -0,0 +1,18 @@
+.language-label {
+    width: auto;
+    font-weight: 900;
+    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;
+}

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<typeof LanguageButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+export const Language: Story = {
+    args: {
+        label: 'JP',
+    },
+};

app/components/LanguageButton/LanguageButton.tsx

@@ -0,0 +1,21 @@
+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) => {
+    return (
+        <button {...props} className="language-button">
+            <div className="language-icon">
+                <FontAwesomeIcon icon={faGlobe} style={{ color: "#F5F5F5", fontSize: 34 }} />
+            </div>
+            <span className="language-label">{label}</span>
+        </button>
+    );
+}

app/components/LinkedButton/LinkedButton.css

@@ -0,0 +1,18 @@
+.Button-link {
+    min-width: 188px;
+    height: 45px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 40px;
+    border-radius: 5px;
+    box-sizing: border-box;
+}
+
+.Button-label {
+    height: 25px;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 100%;
+    margin-right: 20px;
+}

app/components/LinkedButton/LinkedButton.stories.ts

@@ -0,0 +1,37 @@
+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<typeof LinkedButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+export const Default: Story = {
+    args: {
+        url: 'https://example.com',
+        label: '詳細',
+        style: 'default',
+        backgroundColor: 'var(--primery-color)',
+        color: 'var(--accent-color)'
+    },
+};
+
+export const LinkedButtonOutlined: Story = {
+    args: {
+        url: 'https://example.com',
+        label: '詳細',
+        style: 'outlined',
+        backgroundColor: 'var(--primery-color)',
+        color: 'var(--accent-color)'
+    },
+};
+

app/components/LinkedButton/LinkedButton.tsx

@@ -0,0 +1,44 @@
+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 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 (
+        <a href={url} className="Button-link" style={linkStyle} target="_blank" rel="noopener noreferrer" {...props}>
+            <span className="Button-label" style={wordStyle}>{label}</span>
+            <FontAwesomeIcon icon={faArrowUpRightFromSquare} style={{ color: wordStyle.color, fontSize: 22.33 }} />
+        </a>
+    );
+}

app/i18n/ja.json

@@ -1,6 +1,9 @@
 {
+  "language": "JP",
   "common": {
     "button": "ボタン",
+    "detail": "詳細",
+    "list": "一覧",
     "tags": {
       "hackathon": "ハッカソン",
       "recruitment": "募集",

package.json

@@ -24,7 +24,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-i18next": "^15.4.1",
-    "react-router": "^7.3.0"
+    "react-router": "^7.3.0",
+    "react-router-dom": "^7.4.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",
@@ -58,4 +59,4 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.8"
   }
-}
+}