DEV Community: keji

Creating a Flex component using Next.js, Styled-Componets and Typescript

keji — Tue, 22 Aug 2023 14:55:20 +0000

Introduction:

When building a web application, creating flexible and reusable UI components is crucial for maintaining a scalable and maintainable codebase. In this article, I will delve into the process of creating a "Flex" component using the powerful trio of Next.js, Styled-Components, and TypeScript. By harnessing the synergy of these tools, you'll gain the capacity to effortlessly construct flexible and dynamic layouts that adapt harmoniously to various devices.
Prerequisites
Before you begin, make sure you have the following installed:
Node.js and npm (Node Package Manager)
Basic understanding of React.js, Next.js, Styled-Components, and TypeScript

Step 1: Set Up Your Next.js Project

If you haven't already set up a Next.js project, follow these steps:

npx create-next-app my-flex-app
cd my-flex-app

This will create a new Next.js project in a folder called my-flex-app.

Step 2: Install Dependencies

Inside your project directory, install the required dependencies: styled-components, @types/styled-components, and typescript.

npm install styled-components @types/styled-components typescript

Step 3: Create Components Folder

Create a folder named components inside the src directory of your Next.js project. This is where you'll store your flexible components.

Step 4: Create a Flexible Component

Inside the components folder, create a new file for your flexible component. Let's create a FlexBox.tsx component as an example:

interface StyleProps {

  display?: string
  justifycontent?: string
  alignitems?: string
  width?: string | number
  height?: string | number
  flexWrap?: string
  flexdir?: string
  aligncontent?: string
  maxwidth?: string
  margin?: string
  gap?: string
  flexgrow?: string
  order?: string
}

export const FlexibleDiv = styled('div')<StyleProps>`
  display: flex;
  justify-content: ${({ justifycontent }) => justifycontent ?? 'center'};
  align-items: ${({ alignitems }) => alignitems ?? 'center'};
  flex-wrap: ${({ flexWrap }) => flexWrap ?? 'wrap'};
  flex-direction: ${({ flexdir }) => flexdir ?? 'row'};
  width: ${({ width }) => width ?? 'max-content'};
  height: ${({ height }) => height ?? 'max-content'};
  max-width: ${({ maxwidth }) => maxwidth ?? '100%'};
  gap: ${({ gap }) => gap ?? '0'};
  flex-grow: ${({ flexgrow }) => flexgrow ?? '0'};
  order: ${({ order }) => order ?? '0'};
`;

Step 5: Use the Flexible Component

Now you can use the FlexbleDiv component in your pages or other components. For instance, let's create a HomePage.tsx:

// pages/HomePage.tsx

import React from 'react';
import FlexBox from '../components/FlexBox';

const HomePage: React.FC = () => {
  return (
    <FlexibleDiv flexdir="column" justifycontent="center" alignitems="center">
      <h1>Hello, Flex Components!</h1>
      <p>This is a flexible component example.</p>
    </FlexibleDiv>
  );
};

export default HomePage;

Step 6: Run Your Next.js Application

Start your Next.js development server to see the results:

npm run dev

Your flexible FlexibleDiv component can now be used throughout your application. By importing it and passing the desired props, you can easily create flexible layouts and components.

Conclusion

In this tutorial, we've learned how to create flexible components using Next.js, Styled-Components, and TypeScript. This approach provides a solid foundation for building scalable and maintainable UI components within your web application. By following these steps, you can enhance the reusability and flexibility of your code, making it easier to manage and extend as your project grows.

Algorithm in JavaScript: Finding the Minimum and Maximum Sums

keji — Wed, 19 Jul 2023 14:05:11 +0000

In this blog post, we'll dive into solving the Mini-Max Sum algorithm challenge from HackerRank using JavaScript. We'll explore the problem statement, discuss the approach to solve it, and provide a step-by-step breakdown of the JavaScript solution.

Problem Statement:
The Mini-Max Sum algorithm challenge requires finding the minimum and maximum possible sums that can be obtained by summing exactly four out of the five integers in a given array.

Approach and Solution:
To solve the Mini-Max Sum algorithm challenge, we can follow these steps:

Sort the input array in ascending order. This allows us to easily identify the smallest and largest elements.
Calculate the minimum sum by adding the first four elements of the sorted array using the reduce function.
Calculate the maximum sum by adding the last four elements of the sorted array using the reduce function.
Output the minimum and maximum sums.
Here's the JavaScript implementation of the solution:

function miniMaxSum(arr) {
    const sortedArray = arr.sort((a,b) => a - b);
    const minSum = sortedArray.slice(0, arr.length - 1).reduce((acc, sum) => acc + sum);
    const maxSum = sortedArray.slice(1).reduce((acc, sum) => acc + sum);
    console.log(minSum, maxSum);
}

Example Usage:
Let's consider an example to demonstrate the solution. Suppose we have an input array [1, 2, 3, 4, 5]. Calling the miniMaxSum function with this array as an argument will provide us with the minimum and maximum sums.

const arr = [1, 2, 3, 4, 5];
miniMaxSum(arr); // Output: 10 14

In this example, the minimum sum is obtained by adding the first four elements [1, 2, 3, 4], resulting in 10. The maximum sum is obtained by adding the last four elements [2, 3, 4, 5], resulting in 14.`

Conclusion:
In this blog post, we explored the HackerRank Mini-Max Sum algorithm challenge and learned how to find the minimum and maximum sums of an array of integers using JavaScript. We discussed the problem statement, provided a step-by-step breakdown of the approach, and demonstrated an example usage. By understanding the algorithm and implementing the provided solution, you can successfully solve the Mini-Max Sum challenge on HackerRank.

Git Basic Techniques(Cloning).

keji — Wed, 03 Jun 2020 09:07:58 +0000

GIT CLONING

As a starter, using git techniques can be overwhelming and in this post, I'll talk about one of the basic git techniques which are Git Clone. Join me as I explain what git clone is.
What is Git Clone?
the clone command downloads an existing Git repository/project to your local computer. This enables us to work on our copy of the project/repository without any reference from other changes.

To clone a repository, run the git-clone command, followed by the path to the repository.

git clone/path/to/repo

if outsource doesn't reside in the same system, you can SSH to a remote system and clone too

git clone username@remote_system

here is also a graphical example of cloning with SSH.

if you're cloning from a source on the internet, you can simply add the URL

git clone  https://github.com/username.git/the project

in this post, I've talked about GIT CLONE and the ways on how to clone repository or project right into your
local computer.