OCT-11 #73
OCT-11 #73
Conversation
|
Deploy preview for octalogic-website ready! ✅ Preview Built with commit 539ff55. |
src/pages/template.tsx
Outdated
| export function ContactButton() { | ||
| return ( | ||
| <div className="button-container"> | ||
| <Button variant="contactButton1" size="contactButtonSize"> |
There was a problem hiding this comment.
@rakeem996 This component is not re-useable as it stands because if this sample component is used in different pages and you make a change in the template page, it will not change everywhere. You would have to go to all 20 pages and make the change.
The goal here is to make it easier to change the styles app wide without making a change in every place so you need to create a component called button that accepts a prop called variant. Those can be
- primary
- secondary
- outlined
- text
src/pages/template.tsx
Outdated
| <div className="space-y-6"> | ||
| {/* Input Container */} | ||
| <div className="relative max-w-[320px] font-Montserrat"> | ||
| <Label htmlFor="email" className="text-sm font-medium leading-[20px] text-[#0A3D62]"> |
There was a problem hiding this comment.
@rakeem996 This whole block needs to be a component so that every other page simple has to add this and they will get a fully functionnig input with the correct theme, error state etc in their page without having to repeat this code every single time.
<Input type="email" id="email" placeholder="Email" />
src/pages/template.tsx
Outdated
| <div> | ||
| <h3 className="text-lg font-medium">Regular</h3> | ||
| <div className="space-y-2"> | ||
| <p className="font-Montserrat text-xs font-normal">Montserrat Regular - 12px</p> |
There was a problem hiding this comment.
@rakeem996 Likewise here, this needs to ba Typography component which accepts a variant prop.
Header should be h tags while anything that is not a header can be p tags or spans. The designer has fallen short here and he used quite a few variants so let's narrow it down. Take a look at which ones are headers and which ones are used in the body across and design and limit it. Here is how MUI does the variants https://mui.com/material-ui/react-typography/
Create individual components on the template page