Choose Proposal Generation Type

PickProposal Component Documentation

Overview

The PickProposal component allows users to choose between uploading their contract or finding a contract from a database. Based on their choice, users are redirected to the appropriate page to generate a proposal using their information.

Key Features

1. Option to Upload Contract: Users can upload a contract from their device.
2. Option to Find Contract: Users can search for a contract from the database.
3. Navigation: Redirects users to the relevant page based on their choice.

Dependencies

• React: For building the component.
• React Icons: For displaying icons.
• Next.js Router: For navigation.

State Management

No state management is required for this component.

Event Handlers

Handles navigation to different routes based on user choice.

const router = useRouter();

Rendering the Component

Displays two options for the user: Upload Your Contract or Find A Contract.

<div className="p-10">
  <h1 className="mb-4 text-center text-2xl font-bold md:text-4xl">
    Upload or Select a Document for Your Proposal
  </h1>
  <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
    <div
      onClick={() => router.push("/upload-contract")}
      className="folders-card relative mt-4 flex cursor-pointer flex-col items-center rounded-xl border p-10 shadow-lg duration-300 ease-in-out md:me-3 md:mt-8"
    >
      <MdOutlineAdsClick color="#66cc68" className="absolute right-2 top-2" />
      <FaUpload color="#66cc68" className="text-4xl" />
      <h2 className="mt-5 text-center text-lg font-medium font-semibold hover:text-white md:text-2xl">
        Upload Your Contract
      </h2>
      <p className="text-slate test-md mt-5 hidden text-left text-center text-lg md:block">
        Upload a contract from your device and have our application generate a
        proposal for it using your information.
      </p>
    </div>
    <div
      onClick={() => router.push("/find-contracts")}
      className="folders-card relative mt-4 flex cursor-pointer flex-col items-center rounded-xl border p-10 shadow-lg duration-300 ease-in-out md:me-3 md:mt-8"
    >
      <MdOutlineAdsClick color="#66cc68" className="absolute right-2 top-2" />
      <FaMagnifyingGlass color="#66cc68" className="text-4xl" />
      <h2 className="mt-5 text-center text-sm font-medium font-semibold hover:text-white md:text-2xl">
        Find A Contract
      </h2>
      <p className="text-slate mt-4 hidden text-left text-center text-lg md:block">
        Find a contract from our database of contracts and have our application
        generate a proposal for it using your information.
      </p>
    </div>
  </div>
</div>

Explanation

• Title and Instructions: A heading explains the purpose of the page.
• Upload Contract Option: Includes an upload icon, title, and description. Redirects to /upload-contract when clicked.
• Find Contract Option: Includes a search icon, title, and description. Redirects to /find-contracts when clicked.

Conclusion

This documentation provides an overview of the PickProposal component, its key features, and how it facilitates user navigation to upload or find a contract. For further details, refer to the source code in the project directory.