techomoro

import React, { useEffect } from "react";
import { useParams } from "react-router";

function Post() {
  let { postSlug } = useParams();

  useEffect(() => {
    // Fetch post using the postSlug
  }, [postSlug]);

techomoro

import React from "react";
import { Link } from "react-router-dom";

function Posts() {
  return (
    <div className="home">
      <div class="container">
        <Link to="/blog/this-is-a-post-title">
          <div class="row align-items-center my-5">
            <div class="col-lg-7">

techomoro

import React from "react";
import { Outlet } from "react-router-dom";

function Blog() {
  return (
    <div className="home">
      <div class="container">
        <h1 className="text-center mt-5">Blog page</h1>
        <Outlet />
      </div>

techomoro

import Navigation from "../components/Navigation";

export default function Home() {
  return (
    <div>
      <Navigation />

      {/* Dummy data */}
      <div style={{ marginTop: "7rem" }}>
        <section id="home">

techomoro

import "../styles/globals.css";
import "bootstrap/dist/css/bootstrap.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

techomoro

import { useEffect, useState } from "react";

export default function Navigation() {
  
  const [clientWindowHeight, setClientWindowHeight] = useState("");

  const [backgroundTransparacy, setBackgroundTransparacy] = useState(0);
  const [padding, setPadding] = useState(30);
  const [boxShadow, setBoxShadow] = useState(0);

techomoro

.main {
  text-align: center;
  margin-top: 10rem;
}
input {
  height: 2rem;
  width: 20rem;
  border: 1px solid #c9c9c9;
  font-size: 1.2em;
  padding: 0.3rem;

techomoro

import React from "react";
import InputComponent from "../components/InputComponent";
import LengthComponent from "../components/LengthComponent";

export default function Main() {
  return (
    <div className="main">
      <InputComponent />
      <LengthComponent />
    </div>

techomoro

import "../styles/globals.css";
import { RecoilRoot } from "recoil";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <RecoilRoot>
        <Component {...pageProps} />
      </RecoilRoot>
    </div>

techomoro

.main {
  text-align: center;
  margin-top: 10rem;
}
input {
  height: 2rem;
  width: 20rem;
  border: 1px solid #c9c9c9;
  font-size: 1.2em;
  padding: 0.3rem;