polyfact / polyfire-js

🔥 React library of AI components 🔥
https://www.npmjs.com/package/polyfire-js
129 stars 8 forks source link

:zap: react/components: Add Login component #123

Closed lowczarc closed 8 months ago

lowczarc commented 8 months ago

This PR adds a login component:

Screenshot 2023-12-21 at 16-38-31 React App

It can be used like this:

import { TextGenerated, Login } from "polyfire-js/components";

function App() {
    return (
        <Login
            termsOfService="https://example.com/tos"
            privacyPolicy="https://example.com/privacy"
        >
            <h2 className="font-bold">Here's a little auto-generated haiku for you:</h2>
            <TextGenerated
                className="whitespace-pre font-mono p-3 rounded-lg text-left border-solid border border-gray-500 inline-block bg-gray-200"
                prompt="Generate a hello world haiku"
                loadingElement="loading..."
            />
        </Login>
    );
}

The termsOfService and privacyPolicy props can be omitted.

I don't think we should make the loading animation or any of the button component customizable since this is intended to be a very simple opinionated component. The login function of the usePolyfire hook should be used when any customization is needed.