Skip to content

Instantly share code, notes, and snippets.

@ahmetgungor
Created April 13, 2024 20:21
Show Gist options
  • Save ahmetgungor/a725b9628ee784db2d1e32e440fb5796 to your computer and use it in GitHub Desktop.
Save ahmetgungor/a725b9628ee784db2d1e32e440fb5796 to your computer and use it in GitHub Desktop.
Nextjs 14 Modal state ile açılmasını istediğim modal hedef gösterebilirim
<ModalGnrV1 openboolean={(isOpen==1)}title={'Form Başlık'} closeOnClick={()=>{dispatch(changeOpenMode(0))}}
footer={[{
label:'Kaydet',
onClick:()=>{alert('test')},
class:'p-2 bg-green-800 hover:bg-green-700 rounded-sm ml-4 text-white'
},
{
label:'Güncelle',
onClick:()=>{alert('test')},
class:'p-2 bg-yellow-800 hover:bg-yellow-700 rounded-sm ml-4 text-white'
}
]}
>
<div className='text-stone-800'>asd</div>
</ModalGnrV1>
<ModalGnrV1 openboolean={(isOpen==2)} closeOnClick={()=>{dispatch(changeOpenMode(3))}}>
<div className='text-stone-800'>modal2</div>
</ModalGnrV1>
/////////////////////////////////////////////////////
components/modalGnrV1.tsx
import React, {ReactNode } from 'react'
export interface m{
openboolean:boolean;
closeOnClick:Function;
title?:any;
children:ReactNode;
footer?:any;
closeText?:string;
}
export default function ModalGnrV1({openboolean,title,closeOnClick,children,closeText,footer}:m) {
if(openboolean)
{
return (
<div className="modal z-50 fixed w-full h-full top-0 left-0 flex items-center justify-center p-8 ">
<div className="modal-overlay fixed w-full h-full bg-gray-900 opacity-50"></div>
<div className="bg-white w-full lg:h-max mx-auto rounded-lg shadow-xl z-50 overflow-y-auto">
{/* Header */}
<div className="flex justify-between text-black items-center head bg-gray-100 py-1 px-8 text-lg font-medium">
{title || ' .'}
<button className="p-2 bg-gray-200 hover:bg-gray-300 rounded-full ml-4" onClick={()=>{closeOnClick()}}>
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
</button>
</div>
{/* Content */}
<div className="content p-8">
{children}
</div>
{/* Footer */}
<div className="flex justify-end items-end head bg-gray-100 py-1 px-8 text-sm font-medium">
{footer.map((button:any, index:any) => (
<button key={index} onClick={button.onClick} className={button.class}>
{button.label}
</button>
))}
<button className="p-2 bg-red-500 hover:bg-red-400 rounded-sm ml-4 text-white" onClick={()=>{closeOnClick()}} >
{closeText || 'Kapat'}
</button>
</div>
</div>
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment