生成AI時代のフロントエンド開発術

以下は、Figmaから抽出したCSSです。
---
<コピーしたCSS> (内容は確認しておいてください。)
---
 
添付画像は、上記CSSのスクリーンショットです。
これらから、ReactとCSS Moduleのコードを生成してください。
コード生成は、以下のコードを参考にしてください。
---
import React from "react";
import styles from "./Hoge.module.css";
 
const Hoge = () => {
  return ();
};
 
export default Hoge;
---

以下のReactコードとスタイルから、ヘッダーを固定させて かつ 透過しグラデーションしてほしい。
---
<Reactのコード>
---
<スタイルのコード>
---

.navbar {
  position: fixed; /* 固定表示にする */
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: 1000; /* 他の要素より前面に表示するためにz-indexを追加 */
  backdrop-filter: blur(10px); /* 背景をぼかして通過させる */
}

以下のReactコードに対して、テストコードを書いてください。
---
<Reactコード>
---
 
テストコードは、以下のコードを参考にしてください。
---
import { expect, it, describe } from "vitest";
import { render } from "@testing-library/react";
import Hoge from "./Hoge";
 
describe("Hoge", () => {
  const setup = () => {
    const utils = render(<Hoge />);
 
    return { ...utils };
  };
 
  it("should render correctly and match snapshot", () => {
    // Act
    const { asFragment } = setup();
 
    // Assert
    expect(asFragment()).toMatchSnapshot();
  });
});
---

import { expect, it, describe } from "vitest";
import { render } from "@testing-library/react";
import Navbar from "./Navbar";
 
describe("Navbar Component", () => {
  const setup = () => {
    const utils = render(<Navbar />);
 
    return { ...utils };
  };
 
  it("should render correctly and match snapshot", () => {
    // Act
    const { asFragment } = setup();
 
    // Assert
    expect(asFragment()).toMatchSnapshot();
  });
 
  it("should render the logo", () => {
    // Act
    const
 
 { getByText } = setup();
 
    // Assert
    expect(getByText("photo")).toBeDefined();
  });
 
  it("should render all navigation links", () => {
    // Act
    const { getByText } = setup();
 
    // Assert
    const navLinks = ["Features", "Pricing", "Community", "Support"];
    navLinks.forEach((linkText) => {
      expect(getByText(linkText)).toBeDefined();
    });
  });
 
  it("should render the login and register buttons", () => {
    // Act
    const { getByRole } = setup();
 
    // Assert
    expect(getByRole("button", { name: "Log in" })).toBeDefined();
    expect(getByRole("button", { name: "Register" })).toBeDefined();
  });
});