Workshop context
Before this workshop
- In the previous workshop, we used OpenAI to generate color recommendations that match the mood of the quote.
This workshop
- In this workshop, we will apply the colors to the quote in the UI.
After this workshop
- In future workshops, we will:
- clean up the quote’s grammar and gendered language via the OpenAI SDK
- apply a font for the quote selected via the OpenAI SDK
- create an interface for the user to enter their own quotation
Workshop goal
By the end of this workshop you will have an updated UI with a card that displays the quote with the colors returned by OpenAI.
Example page after the button is clicked:
(Note we’ll have OpenAI clean up the grammar and punctuation in the next workshop!)
Hints
Hint 1
In src/hooks/use-quote-styles.tsx, create a new state for quoteProperties. The value can be an object with this shape:
export interface QuoteProperties {
quote: string;
colors: {
text: string;
background: string;
};
// include font later
}Define and export this type in src/types/index.ts; we’re going to need this type for the revised QuoteContent props, too.
Hint 2
Populate the quoteProperties state after receiving a response from the server (remove the quote state, since we’re storing the quote text in quoteProperties now). Then pass quoteProperties as a prop to QuoteContent and use the values as props for Card.
Hint 3
As the JSON gets more complicated, so will the logic to validate it. Consider making an isValidJson function to check the JSON properties and see whether the “Malformed Response” error needs to be thrown in useQuoteStyles.
The type of the argument for isValidJson will be any, since the output of await response.json() is any
Hint 4
Because Card has already been set up to use the props for styles, you should not have to edit Card at all to see the colors.