app/others/eidmubarak/generate/page.jsx

"use client"

import React from "react";
import "./style.css";
import Link from "next/link";
const page = ( {params} ) => {

    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [link, setLink] = React.useState('./')
    console.log(params.name)
  return (
    <div

    className="temp"
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        width: "100%",
        minHeight: "100vh",
        textAlign: "center",

      }}
    >

      <div
        className="col"
        style={{
          maxWidth: "700px",
          textAlign: "center",
          padding: "40px",
          borderRadius: "30px",
          boxShadow: "0 0 100px rgba(10, 100, 200, 0.6)",
          alignItems: "center",
          justifyContent: "center",
          width: "90%",
          marginTop: "50px",
          marginBottom: "50px",
        }}
      >
        <p style={{marginBottom:"30px"}}>এখানে আপনার নাম দিনঃ </p>
        <input style={{width:"100%", padding:"10px", borderRadius:"10px", border:"none", boxShadow:"0 0 10px rgba(0, 0, 0, 0.1)", backgroundColor:"#111111", color:"white", outline:'none', border: "#00c8ff 2px solid"}} onChange={(e)=>{'./others/eidmubarak/'+setLink(e.target.value)}} placeholder="আপনার নাম" onKeyDown={(e)=>{if(e.key === 'Enter'){window.location.href = link || './'}}}></input>

        <Link style={{marginTop: "50px"}} className="btn2" href={link}><i className="animation"></i>লিঙ্ক তৈরি করুন<i className="animation"></i></Link>
      </div>
      
    </div>
  );
};

export default page;