![]() In our app, a user can select one of these templates which will be saved online, and explore an example of how the templates can be used through a form that feeds information to an information grid that will be appended on top of the card. We will also create a second card template that can be used like the card above to help[ find a clearer picture of the css grid functionalities we’ve learned. In our case, we will build an app that captures the template above and stores it online for future reference as well as demonstrates an example of displaying information in the card. There can be several ideas respective of the developer on how information in the card can be displayed. The template above is ready to be used to design any card, for the purpose of a business card in this article we include a demonstration. The above code completes our card template component. Your final card component should look like below "pages/index" we set the property background-color of specific grids and use the span property to stretch the space our color occupies.įor a clearer picture of what we just did import the color components inside the index directory and include them in your ColorGrid. Head to the emotion/card1 directory and add the following "styles/emotion/card1" This article will use the color red and green for our card component. The trick is to select the specific grids and fill the background with respective colors. With the color grid set up, we are ready to include our colors as we see fit. You can view your color grid through your browser inspects section. "styles/emotion/card1"Īfter importing the code above in the index directory, include the component inside the card component as shown below Add the code below to the styles/emotion/card1 directory. We now introduce a color grid in which we will contain our colored designs. Ensure to import it in the index directory for the code to run. Everything else shall be done inside the card container. I put a background color for it to be visible enough. Import styled from const Card_1 = styled.div` Ensure to import the emotion module before creating your component. In your styles directory, create a directory named emotion/card1.js, and inside we start by creating a card component. "pages/upload"Įxport default async function handler(req, res) from 'react' Ĭonst Card1 = forwardRef((props, ref) => ( We can finally introduce a handler function to execute our POST request. The above code configures our cloudinary environment keys and libraries. Var cloudinary = require("cloudinary").v2 Īpi_secret: _API_SECRET, Start by pasting the following inside "pages/upload" ![]() Head to the pages/api directory and create a file named upload.js. ![]() Use the npm run dev command to start your project. Paste the following code and fill the blanks with your environment variables from the cloudinary dashboard. To use these variables, go to your project root folder and create a new file names. The dashboard should contain environment variables necessary for cloudinary integration. If you don’t have an account you can create one and log into it to access your dashboard. Use this link to access the cloudinary login page. We’ll use our backend code to upload generated card templates. The backend involves integrating Cloudinary for media upload. Use npx create-next-app card-design to create a Next.js project and head to the directory using `cd card design
0 Comments
Leave a Reply. |