d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/catalog

Browse Source
This commit is contained in:
bhwa23
2024-03-15 14:09:09 +08:00
committed by GitHub
parent e39679a18c 7826cef935
commit b1e0e1e376
3 changed files with 245 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
lib/utils/index.js
View File

@@ -16,7 +16,7 @@ export const isSearchEngineBot = () => {
return false
}
// 获取用户代理字符串
const userAgent = navigator.userAgent;
const userAgent = navigator.userAgent
// 使用正则表达式检测是否包含搜索引擎爬虫关键字
return /Googlebot|bingbot|Baidu/.test(userAgent)
}
@@ -24,8 +24,8 @@ export const isSearchEngineBot = () => {
/**
* 组件持久化
*/
export const memorize = (Component) => {
const MemoizedComponent = (props) => {
export const memorize = Component => {
const MemoizedComponent = props => {
return <Component {...props} />
}
return memo(MemoizedComponent)
@@ -34,26 +34,26 @@ export const memorize = (Component) => {
// 转换外链
export function sliceUrlFromHttp(str) {
// 检查字符串是否包含http
if (str.includes('http:') || str.includes('https:')) {
if (str?.includes('http:') || str?.includes('https:')) {
// 如果包含，找到http的位置
const index = str.indexOf('http');
const index = str?.indexOf('http')
// 返回http之后的部分
return str.slice(index, str.length);
return str.slice(index, str.length)
} else {
// 如果不包含，返回原字符串
return str;
return str
}
}
// 检查是否外链
export function checkContainHttp(str) {
// 检查字符串是否包含http
if (str.includes('http:') || str.includes('https:')) {
if (str?.includes('http:') || str?.includes('https:')) {
// 如果包含，找到http的位置
return str.indexOf('http') > -1
return str?.indexOf('http') > -1
} else {
// 不包含
return false;
return false
}
}
@@ -65,7 +65,10 @@ export function checkContainHttp(str) {
*/
export function loadExternalResource(url, type) {
// 检查是否已存在
const elements = type === 'js' ? document.querySelectorAll(`[src='${url}']`) : document.querySelectorAll(`[href='${url}']`)
const elements =
type === 'js'
? document.querySelectorAll(`[src='${url}']`)
: document.querySelectorAll(`[href='${url}']`)
return new Promise((resolve, reject) => {
if (elements.length > 0 || !url) {
@@ -112,9 +115,11 @@ export function getQueryVariable(key) {
const vars = query.split('&')
for (let i = 0; i < vars.length; i++) {
const pair = vars[i].split('=')
if (pair[0] === key) { return pair[1] }
if (pair[0] === key) {
return pair[1]
}
}
return (false)
return false
}
/**
* 获取 URL 中指定参数的值
@@ -124,9 +129,9 @@ export function getQueryVariable(key) {
*/
export function getQueryParam(url, param) {
// 移除哈希部分
const urlWithoutHash = url.split('#')[0];
const searchParams = new URLSearchParams(urlWithoutHash.split('?')[1]);
return searchParams.get(param);
const urlWithoutHash = url.split('#')[0]
const searchParams = new URLSearchParams(urlWithoutHash.split('?')[1])
return searchParams.get(param)
}
/**
@@ -157,7 +162,7 @@ export function mergeDeep(target, ...sources) {
* @returns {boolean}
*/
export function isObject(item) {
return (item && typeof item === 'object' && !Array.isArray(item))
return item && typeof item === 'object' && !Array.isArray(item)
}
/**
@@ -210,10 +215,7 @@ export const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
* @returns {*}
*/
export const getListByPage = function (list, pageIndex, pageSize) {
return list.slice(
0,
pageIndex * pageSize
)
return list.slice(0, pageIndex * pageSize)
}
/**
@@ -230,7 +232,7 @@ export const isMobile = () => {
// isMobile = true
// }
if (!isMobile && (/Mobi|Android|iPhone/i.test(navigator.userAgent))) {
if (!isMobile && /Mobi|Android|iPhone/i.test(navigator.userAgent)) {
isMobile = true
}
@@ -249,41 +251,41 @@ export const isMobile = () => {
* 扫描页面上的所有文本节点，将url格式的文本转为可点击链接
* @param {*} node
*/
export const scanAndConvertToLinks = (node) => {
export const scanAndConvertToLinks = node => {
if (node.nodeType === Node.TEXT_NODE) {
const text = node.textContent;
const urlRegex = /https?:\/\/[^\s]+/g;
let lastIndex = 0;
let match;
const text = node.textContent
const urlRegex = /https?:\/\/[^\s]+/g
let lastIndex = 0
let match
const newNode = document.createElement('span');
const newNode = document.createElement('span')
while ((match = urlRegex.exec(text)) !== null) {
const beforeText = text.substring(lastIndex, match.index);
const url = match[0];
const beforeText = text.substring(lastIndex, match.index)
const url = match[0]
if (beforeText) {
newNode.appendChild(document.createTextNode(beforeText));
newNode.appendChild(document.createTextNode(beforeText))
}
const link = document.createElement('a');
link.href = url;
const link = document.createElement('a')
link.href = url
link.target = '_blank'
link.textContent = url;
link.textContent = url
newNode.appendChild(link);
newNode.appendChild(link)
lastIndex = urlRegex.lastIndex;
lastIndex = urlRegex.lastIndex
}
if (lastIndex < text.length) {
newNode.appendChild(document.createTextNode(text.substring(lastIndex)));
newNode.appendChild(document.createTextNode(text.substring(lastIndex)))
}
node.parentNode.replaceChild(newNode, node);
node.parentNode.replaceChild(newNode, node)
} else if (node.nodeType === Node.ELEMENT_NODE) {
for (const childNode of node.childNodes) {
scanAndConvertToLinks(childNode);
scanAndConvertToLinks(childNode)
}
}
}

170
styles/notion.css
View File

@@ -116,7 +116,6 @@
}
}
.notion-page-content-inner {
position: relative;
display: flex;
@@ -179,7 +178,6 @@
color: var(--select-color-2) !important;
}
.notion-app {
position: relative;
background: var(--bg-color);
@@ -211,17 +209,17 @@
/* width: auto !important; */
}
@media (max-width: 768px){
.medium-zoom-image--opened {
object-fit: fill !important;
height: auto !important;
}
@media (max-width: 768px) {
.medium-zoom-image--opened {
object-fit: fill !important;
height: auto !important;
}
}
@media (min-width: 768px){
.medium-zoom-image--opened {
object-fit: scale-down !important;
}
@media (min-width: 768px) {
.medium-zoom-image--opened {
object-fit: scale-down !important;
}
}
.notion-frame {
@@ -405,13 +403,13 @@ summary > .notion-h {
.notion-h1 {
font-size: 1.575em;
margin-top: 1.08em;
@apply border-b w-full
@apply border-b w-full;
}
.notion-h2 {
@apply w-full
@apply w-full;
}
.notion-h3 {
@apply w-full
@apply w-full;
}
.notion-header-anchor {
@@ -443,7 +441,7 @@ summary > .notion-h {
.notion-h:hover .notion-hash-link {
opacity: 1;
@apply dark:fill-gray-200
@apply dark:fill-gray-200;
}
.notion-hash-link {
@@ -560,10 +558,12 @@ summary > .notion-h {
color: inherit;
word-break: break-word;
text-decoration: inherit;
border-bottom: .05em solid !important;
border-bottom: 0.05em solid !important;
border-color: var(--fg-color-2);
opacity: 0.7;
transition: border-color 100ms ease-in, opacity 100ms ease-in;
transition:
border-color 100ms ease-in,
opacity 100ms ease-in;
}
.notion-link:hover {
@@ -601,7 +601,7 @@ summary > .notion-h {
margin: 2px 4px 0 2px;
fill: var(--fg-color-6);
color: var(--fg-color-icon);
@apply dark:fill-gray-200
@apply dark:fill-gray-200;
}
img.notion-page-icon,
@@ -667,12 +667,12 @@ svg.notion-page-icon {
}
.notion-list-numbered > .notion-list-numbered {
list-style-type: lower-alpha;
list-style-type: lower-alpha;
}
.notion-list-numbered > .notion-list-numbered > .notion-list-numbered {
list-style-type: lower-roman;
}
list-style-type: lower-roman;
}
.notion-list-disc li {
padding-left: 0.1em;
@@ -701,7 +701,7 @@ svg.notion-page-icon {
}
.notion-asset-wrapper-image > div {
height: auto !important;
height: auto !important;
}
.notion-asset-wrapper-full {
@@ -709,7 +709,7 @@ svg.notion-page-icon {
}
.notion-asset-wrapper img {
width: 90%;
/* width: 90%; */
/* height: 100%; */
height: auto !important;
max-height: 100%;
@@ -851,7 +851,7 @@ code[class*='language-'] {
.notion-bookmark-link {
display: flex;
margin-top: 6px;
@apply w-52 md:w-80
@apply w-52 md:w-80;
}
.notion-bookmark-link > img {
@@ -919,7 +919,7 @@ code[class*='language-'] {
font-size: 14px;
line-height: 1.4;
color: var(--fg-color-3);
@apply dark:text-gray-300
@apply dark:text-gray-300;
}
.notion-callout {
@@ -1122,7 +1122,7 @@ code[class*='language-'] {
.notion-table-of-contents {
width: 100%;
margin: 4px 0;
@apply bg-gray-50 dark:bg-gray-900 p-2
@apply bg-gray-50 dark:bg-gray-900 p-2;
}
.notion-table-of-contents-item {
@@ -1142,8 +1142,7 @@ code[class*='language-'] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@apply dark:text-white
@apply dark:text-white;
}
.notion-table-of-contents-item:hover {
@@ -1296,8 +1295,8 @@ code[class*='language-'] {
transition: background 20ms ease-in 0s;
color: inherit;
text-decoration: none;
@apply dark:stroke-slate-200
@apply dark:stroke-slate-200;
}
.notion-file-link:hover {
@@ -1337,7 +1336,7 @@ code[class*='language-'] {
line-height: 16px;
margin-left: 6px;
@apply dark:text-gray-400 !important
@apply dark:text-gray-400 !important;
}
.notion-audio {
@@ -1396,8 +1395,8 @@ code[class*='language-'] {
white-space: normal;
}
.katex-display>.katex>.katex-html>.tag {
position: inherit !important;
.katex-display > .katex > .katex-html > .tag {
position: inherit !important;
}
.notion-page-title {
@@ -1424,13 +1423,13 @@ code[class*='language-'] {
@apply max-w-0;
}
.notion-collection-card{
.notion-collection-card {
/* cursor: default !important; */
}
.notion-collection-card-property .notion-link {
border-bottom: 0 none;
cursor: pointer
cursor: pointer;
}
.notion-collection-card-property .notion-page-title {
@@ -1469,7 +1468,7 @@ code[class*='language-'] {
}
.notion-collection-row {
@apply hidden
@apply hidden;
}
.notion-collection-row-body {
@@ -1612,7 +1611,8 @@ code[class*='language-'] {
}
.lazy-image-real.medium-zoom-image {
transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1),
transition:
transform 0.3s cubic-bezier(0.2, 0, 0.2, 1),
opacity 400ms ease-out !important;
will-change: opacity, transform;
}
@@ -1700,12 +1700,16 @@ svg + .notion-page-title-text {
@apply text-gray-600 dark:text-gray-300;
}
.notion-gray_background,.notion-brown_background,
.notion-orange_background,.notion-yellow_background,
.notion-blue_background,.notion-purple_background,
.notion-teal_background,.notion-red_background,
.notion-pink_background{
@apply dark:text-black
.notion-gray_background,
.notion-brown_background,
.notion-orange_background,
.notion-yellow_background,
.notion-blue_background,
.notion-purple_background,
.notion-teal_background,
.notion-red_background,
.notion-pink_background {
@apply dark:text-black;
}
.notion-bookmark:hover {
@@ -1737,7 +1741,7 @@ svg + .notion-page-title-text {
padding: 4px 2px;
white-space: nowrap;
overflow: hidden;
@apply px-0 !important
@apply px-0 !important;
}
.notion-collection-header-title {
@@ -1791,7 +1795,7 @@ svg + .notion-page-title-text {
/* fill: var(--fg-color); */
fill: rgba(55, 53, 47);
margin-right: 6px;
@apply dark:fill-gray-200
@apply dark:fill-gray-200;
}
.notion-collection-view-type-title {
@@ -1799,13 +1803,13 @@ svg + .notion-page-title-text {
overflow: hidden;
text-overflow: ellipsis;
color: var(--fg-color);
@apply dark:text-gray-200
@apply dark:text-gray-200;
}
.notion-table {
align-self: center;
overflow: auto hidden;
@apply w-full !important
@apply w-full !important;
}
.notion-table-view {
@@ -1814,13 +1818,13 @@ svg + .notion-page-title-text {
min-width: var(--notion-max-width);
padding-left: 0;
transition: padding 200ms ease-out;
@apply px-0 !important
@apply px-0 !important;
}
.notion-table-header {
display: flex;
position: absolute;
z-index:30;
z-index: 30;
height: 33px;
color: var(--fg-color-3);
min-width: var(--notion-max-width);
@@ -1872,7 +1876,7 @@ svg + .notion-page-title-text {
line-height: 120%;
min-width: 0;
font-size: 14px;
@apply dark:text-gray-200
@apply dark:text-gray-200;
}
.notion-collection-column-title-icon {
@@ -1883,12 +1887,11 @@ svg + .notion-page-title-text {
min-height: 14px;
fill: var(--fg-color-2);
margin-right: 6px;
@apply dark:text-gray-200 dark:fill-gray-200
@apply dark:text-gray-200 dark:fill-gray-200;
}
.notion-collection-view-tabs-content-item-active {
@apply dark:border-gray-300
@apply dark:border-gray-300;
}
.notion-collection-column-title-body {
@@ -1947,12 +1950,12 @@ svg + .notion-page-title-text {
padding: 7px 8px 0;
}
.notion-simple-table {
.notion-simple-table {
@apply whitespace-nowrap overflow-x-auto block w-full border-0 !important;
}
.notion-asset-wrapper-pdf > div {
display: block !important;
display: block !important;
}
/* https://github.com/kchen0x */
@@ -1972,47 +1975,49 @@ svg + .notion-page-title-text {
/* color: var(--notion-gray); */
}
.notion-asset-wrapper-pdf>div{
width:unset!important
.notion-asset-wrapper-pdf > div {
width: unset !important;
}
/* pdf预览适配页面 */
.react-pdf__Page__canvas,.react-pdf__Page__textContent{
width: 100% !important;
height: auto !important;
.react-pdf__Page__canvas,
.react-pdf__Page__textContent {
width: 100% !important;
height: auto !important;
}
/* simple table设置 */
table,thead,tbody{
display:block
table,
thead,
tbody {
display: block;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
thead,
tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
.notion-collection-card{
@apply dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-black
.notion-collection-card {
@apply dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-black;
}
.notion-code-copy{
display: none;
.notion-code-copy {
display: none;
}
pre[class*="language-mermaid"] {
@apply bg-gray-50 dark:bg-gray-200 !important;
pre[class*='language-mermaid'] {
@apply bg-gray-50 dark:bg-gray-200 !important;
}
/* mermaid 原文隐藏 */
code.language-mermaid {
display:none
display: none;
}
.code-toolbar{
.code-toolbar {
@apply w-full shadow-md pb-0;
}
@@ -2036,7 +2041,7 @@ code.language-mermaid {
@apply dark:border-gray-200 !important;
}
.notion-external-image > svg > g > path{
.notion-external-image > svg > g > path {
@apply dark:fill-gray-200 !important;
}
@@ -2049,17 +2054,16 @@ code.language-mermaid {
}
/* 表格头 */
.notion-simple-table tr:first-child td{
.notion-simple-table tr:first-child td {
background-color: #f5f6f8;
@apply text-center font-bold dark:bg-gray-800 !important;
}
.notion-simple-table td{
border: 1px solid var(#eee) !important
.notion-simple-table td {
border: 1px solid var(#eee) !important;
}
/* 竖屏视频高度bug */
figure.notion-asset-wrapper.notion-asset-wrapper-video>div {
height: 100% !important;
figure.notion-asset-wrapper.notion-asset-wrapper-video > div {
height: 100% !important;
}

185
themes/plog/components/Modal.js
View File

@@ -6,17 +6,28 @@ import Link from 'next/link'
import { siteConfig } from '@/lib/config'
import LazyImage from '@/components/LazyImage'
import { compressImage } from '@/lib/notion/mapImage'
import { checkContainHttp, sliceUrlFromHttp } from '@/lib/utils'
/**
* 弹出框
*/
export default function Modal(props) {
const { showModal, setShowModal, modalContent, setModalContent } = usePlogGlobal()
const { showModal, setShowModal, modalContent, setModalContent } =
usePlogGlobal()
const { siteInfo, posts } = props
const cancelButtonRef = useRef(null)
const img = compressImage(modalContent?.pageCover || siteInfo?.pageCover, 1200, 85, 'webp')
const img = compressImage(
modalContent?.pageCover || siteInfo?.pageCover,
1200,
85,
'webp'
)
const imgRef = useRef(null)
const url = checkContainHttp(modalContent?.slug)
? sliceUrlFromHttp(modalContent?.slug)
: `${siteConfig('SUB_PATH', '')}/${modalContent?.slug}`
// 添加loading状态
const [loading, setLoading] = useState(true)
@@ -53,73 +64,111 @@ export default function Modal(props) {
}
return (
<Transition.Root show={showModal} as={Fragment}>
<Dialog as="div" className="relative z-20" initialFocus={cancelButtonRef} onClose={handleClose}>
{/* 遮罩 */}
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
<Transition.Root show={showModal} as={Fragment}>
<Dialog
as="div"
className="relative z-20"
initialFocus={cancelButtonRef}
onClose={handleClose}
>
{/* 遮罩 */}
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div
style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
className="fixed inset-0 glassmorphism transition-opacity"
/>
</Transition.Child>
<div className="fixed inset-0 z-30 overflow-y-auto">
<div className="flex min-h-full justify-center p-4 text-center items-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 scale-50 w-0"
enterTo={'opacity-100 translate-y-0 max-w-screen'}
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 scale-100 max-w-screen"
leaveTo="opacity-0 translate-y-4 scale-50 w-0"
>
<Dialog.Panel className="group relative transform overflow-hidden rounded-xl text-left shadow-xl transition-all ">
{/* 添加onLoad事件处理函数 */}
{/* 添加loading状态 */}
<div
className={`bg-hexo-black-gray w-32 h-32 flex justify-center items-center ${loading ? '' : 'hidden'}`}
>
<div style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} className="fixed inset-0 glassmorphism transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-30 overflow-y-auto">
<div className="flex min-h-full justify-center p-4 text-center items-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 scale-50 w-0"
enterTo={'opacity-100 translate-y-0 max-w-screen'}
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 scale-100 max-w-screen"
leaveTo="opacity-0 translate-y-4 scale-50 w-0"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-xl text-left shadow-xl transition-all ">
{/* 添加loading状态 */}
<div className={`bg-hexo-black-gray w-32 h-32 flex justify-center items-center ${loading ? '' : 'hidden'}`}>
<ArrowPath className='w-10 h-10 animate-spin text-gray-200' />
</div>
{/* 添加onLoad事件处理函数 */}
<LazyImage onLoad={handleImageLoad} src={img} ref={imgRef} style={{ display: loading ? 'none' : 'block' }} className={`w-full max-w-7xl max-h-[90vh] shadow-xl ${!loading ? ' animate__animated animate__fadeIn' : ''}`} />
{!loading && (<>
<div className='absolute bottom-0 left-0 m-4 z-20'>
<Link href={`${siteConfig('SUB_PATH', '')}/${modalContent.slug}`}>
<div className='flex'>
<h2 style={{ textShadow: '0.1em 0.1em 0.2em black' }} className='text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg'>{modalContent?.title}</h2>
</div>
</Link>
<Link href={`${siteConfig('SUB_PATH', '')}/${modalContent.slug}`}>
<div style={{ textShadow: '0.1em 0.1em 0.2em black' }} className={'line-clamp-3 md:line-clamp-none overflow-hidden cursor-pointer text-gray-50 rounded-lg m-2'}>
{modalContent?.summary}
</div>
</Link>
{modalContent?.category && (
<div className='flex'>
<Link href={`/category/${modalContent?.category}`} className='text-xs rounded-lg mt-3 px-2 py-1 bg-black bg-opacity-20 text-white hover:bg-blue-700 hover:text-white duration-200'>
{modalContent?.category}
</Link>
</div>
)}
</div>
<div className='z-10 absolute hover:opacity-50 opacity-0 duration-200 transition-opacity w-full top-0 left-0 px-4 h-full items-center flex justify-between'>
<div onClick={prev}><ChevronLeft className='cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150' /></div>
<div onClick={next}><ChevronRight className='cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150' /></div>
</div>
</>)}
</Dialog.Panel>
</Transition.Child>
</div>
<ArrowPath className="w-10 h-10 animate-spin text-gray-200" />
</div>
</Dialog>
</Transition.Root>
<Link href={url}>
<LazyImage
onLoad={handleImageLoad}
src={img}
ref={imgRef}
style={{ display: loading ? 'none' : 'block' }}
className={`w-full select-none max-w-7xl max-h-[90vh] shadow-xl ${!loading ? ' animate__animated animate__fadeIn' : ''}`}
/>
</Link>
{!loading && (
<>
<div className="absolute bottom-0 left-0 m-4 z-20">
<div className="flex">
<h2
style={{ textShadow: '0.1em 0.1em 0.2em black' }}
className="text-2xl md:text-5xl text-white mb-4 px-2 py-1 rounded-lg"
>
{modalContent?.title}
</h2>
</div>
<div
style={{ textShadow: '0.1em 0.1em 0.2em black' }}
className={
'line-clamp-3 md:line-clamp-none overflow-hidden cursor-pointer text-gray-50 rounded-lg m-2'
}
>
{modalContent?.summary}
</div>
{modalContent?.category && (
<div className="flex">
<Link
href={`/category/${modalContent?.category}`}
className="text-xs rounded-lg mt-3 px-2 py-1 bg-black bg-opacity-20 text-white hover:bg-blue-700 hover:text-white duration-200"
>
{modalContent?.category}
</Link>
</div>
)}
</div>
{/* <div className="z-10 absolute hover:opacity-50 opacity-0 duration-200 transition-opacity w-full top-0 left-0 px-4 h-full items-center flex justify-between"> */}
<div
onClick={prev}
className="z-10 absolute left-0 top-1/2 -mt-12 group-hover:opacity-50 opacity-0 duration-200 transition-opacity"
>
<ChevronLeft className="cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150" />
</div>
<div
onClick={next}
className="z-10 absolute right-0 top-1/2 -mt-12 group-hover:opacity-50 opacity-0 duration-200 transition-opacity"
>
<ChevronRight className="cursor-pointer w-24 h-32 hover:opacity-100 stroke-white stroke-1 scale-y-150" />
</div>
{/* </div> */}
</>
)}
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
)
}