mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-13 23:16:47 +00:00
remove daisy , add heroicon
This commit is contained in:
tangly1024
@@ -1,5 +1,6 @@
|
||||
import { useGlobal } from '@/lib/global'
|
||||
import { saveDarkModeToCookies } from '@/themes/theme'
|
||||
import { Moon, Sun } from './HeroIcons'
|
||||
|
||||
const DarkModeButton = (props) => {
|
||||
const { isDarkMode, updateDarkMode } = useGlobal()
|
||||
@@ -13,8 +14,8 @@ const DarkModeButton = (props) => {
|
||||
htmlElement.classList?.add(newStatus ? 'dark' : 'light')
|
||||
}
|
||||
|
||||
return <div onClick={handleChangeDarkMode} className={'px-1 dark:text-gray-200 text-gray-800 z-10 duration-200 text-xl hover:scale-110 cursor-pointer transform ' + props.className}>
|
||||
<i id='darkModeButton' className={`${isDarkMode ? 'far fa-sun' : 'far fa-moon'}`}/>
|
||||
</div>
|
||||
return <div onClick={handleChangeDarkMode} className={`${props.className ? props.className : ''} flex justify-center dark:text-gray-200 text-gray-800`}>
|
||||
<div id='darkModeButton' className=' hover:scale-110 cursor-pointer transform duration-200 w-5 h-5'> {isDarkMode ? <Sun /> : <Moon />}</div>
|
||||
</div>
|
||||
}
|
||||
export default DarkModeButton
|
||||
|
||||
12
components/HeroIcons.js
Normal file
12
components/HeroIcons.js
Normal file
@@ -0,0 +1,12 @@
|
||||
const Moon = () => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||||
</svg>
|
||||
}
|
||||
|
||||
const Sun = () => {
|
||||
return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||
</svg>
|
||||
}
|
||||
export { Moon, Sun }
|
||||
@@ -29,7 +29,6 @@
|
||||
"aos": "^3.0.0-beta.6",
|
||||
"axios": ">=0.21.1",
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
"daisyui": "^3.1.7",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"feed": "^4.2.2",
|
||||
"js-md5": "^0.7.3",
|
||||
|
||||
@@ -29,5 +29,5 @@ module.exports = {
|
||||
variants: {
|
||||
extend: {}
|
||||
},
|
||||
plugins: [require('daisyui')]
|
||||
plugins: []
|
||||
}
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
/* eslint-disable @next/next/no-img-element */
|
||||
const Carousel = () => {
|
||||
return <div className="carousel carousel-center rounded-box">
|
||||
<div className="carousel-item">
|
||||
<img src="https://daisyui.com//images/stock/photo-1559703248-dcaaec9fab78.jpg" alt="Pizza" />
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<img src="https://daisyui.com//images/stock/photo-1565098772267-60af42b81ef2.jpg" alt="Pizza" />
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<img src="https://daisyui.com//images/stock/photo-1572635148818-ef6fd45eb394.jpg" alt="Pizza" />
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<img src="https://daisyui.com//images/stock/photo-1494253109108-2e30c049369b.jpg" alt="Pizza" />
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<img src="https://daisyui.com//images/stock/photo-1550258987-190a2d41a8ba.jpg" alt="Pizza" />
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<img src="https://daisyui.com//images/stock/photo-1559181567-c3190ca9959b.jpg" alt="Pizza" />
|
||||
</div>
|
||||
<div className="carousel-item">
|
||||
<img src="https://daisyui.com//images/stock/photo-1601004890684-d8cbf643f5f2.jpg" alt="Pizza" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Carousel
|
||||
@@ -1,28 +0,0 @@
|
||||
/* eslint-disable react/no-unescaped-entities */
|
||||
const ChatBubble = () => {
|
||||
return <>
|
||||
<div className="chat chat-start">
|
||||
<div className="chat-bubble chat-bubble-primary">What kind of nonsense is this</div>
|
||||
</div>
|
||||
<div className="chat chat-start">
|
||||
<div className="chat-bubble chat-bubble-secondary">Put me on the Council and not make me a Master!??</div>
|
||||
</div>
|
||||
<div className="chat chat-start">
|
||||
<div className="chat-bubble chat-bubble-accent">That's never been done in the history of the Jedi. It's insulting!</div>
|
||||
</div>
|
||||
<div className="chat chat-end">
|
||||
<div className="chat-bubble chat-bubble-info">Calm down, Anakin.</div>
|
||||
</div>
|
||||
<div className="chat chat-end">
|
||||
<div className="chat-bubble chat-bubble-success">You have been given a great honor.</div>
|
||||
</div>
|
||||
<div className="chat chat-end">
|
||||
<div className="chat-bubble chat-bubble-warning">To be on the Council at your age.</div>
|
||||
</div>
|
||||
<div className="chat chat-end">
|
||||
<div className="chat-bubble chat-bubble-error">It's never happened before.</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
export default ChatBubble
|
||||
@@ -1,7 +0,0 @@
|
||||
const Divider = () => {
|
||||
return <div className="flex flex-col w-full border-opacity-50">
|
||||
<div className="divider"></div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Divider
|
||||
@@ -1,10 +0,0 @@
|
||||
const DropDownMenu = () => {
|
||||
return <details className="dropdown mb-32">
|
||||
<summary className="m-1 btn">open or close</summary>
|
||||
<ul className="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
|
||||
<li><a>Item 1</a></li>
|
||||
<li><a>Item 2</a></li>
|
||||
</ul>
|
||||
</details>
|
||||
}
|
||||
export default DropDownMenu
|
||||
@@ -1,38 +0,0 @@
|
||||
const Footer = () => {
|
||||
return <footer className="footer p-10 bg-base-200 text-base-content">
|
||||
<div>
|
||||
<span className="footer-title">Services</span>
|
||||
<a className="link link-hover">Branding</a>
|
||||
<a className="link link-hover">Design</a>
|
||||
<a className="link link-hover">Marketing</a>
|
||||
<a className="link link-hover">Advertisement</a>
|
||||
</div>
|
||||
<div>
|
||||
<span className="footer-title">Company</span>
|
||||
<a className="link link-hover">About us</a>
|
||||
<a className="link link-hover">Contact</a>
|
||||
<a className="link link-hover">Jobs</a>
|
||||
<a className="link link-hover">Press kit</a>
|
||||
</div>
|
||||
<div>
|
||||
<span className="footer-title">Legal</span>
|
||||
<a className="link link-hover">Terms of use</a>
|
||||
<a className="link link-hover">Privacy policy</a>
|
||||
<a className="link link-hover">Cookie policy</a>
|
||||
</div>
|
||||
<div>
|
||||
<span className="footer-title">Newsletter</span>
|
||||
<div className="form-control w-80">
|
||||
<label className="label">
|
||||
<span className="label-text">Enter your email address</span>
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input type="text" placeholder="username@site.com" className="input input-bordered w-full pr-16" />
|
||||
<button className="btn btn-primary absolute top-0 right-0 rounded-l-none">Subscribe</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@@ -1,13 +0,0 @@
|
||||
const Hero = () => {
|
||||
return <div className="hero min-h-screen bg-base-200">
|
||||
<div className="hero-content text-center">
|
||||
<div className="max-w-md">
|
||||
<h1 className="text-5xl font-bold">Hello there</h1>
|
||||
<p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
|
||||
<button className="btn btn-primary">Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Hero
|
||||
@@ -1,15 +0,0 @@
|
||||
const HeroWithFigure = () => {
|
||||
return <div className="hero min-h-screen bg-base-200">
|
||||
<div className="hero-content flex-col lg:flex-row">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src="/avatar.png" className="max-w-sm rounded-lg shadow-2xl" />
|
||||
<div>
|
||||
<h1 className="text-5xl font-bold">Box Office News!</h1>
|
||||
<p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
|
||||
<button className="btn btn-primary">Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default HeroWithFigure
|
||||
@@ -1,34 +0,0 @@
|
||||
const HeroWithForm = () => {
|
||||
return <div className="hero min-h-screen bg-base-200">
|
||||
<div className="hero-content flex-col lg:flex-row-reverse">
|
||||
<div className="text-center lg:text-left">
|
||||
<h1 className="text-5xl font-bold">Login now!</h1>
|
||||
<p className="py-6">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
|
||||
</div>
|
||||
<div className="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100">
|
||||
<div className="card-body">
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text">Email</span>
|
||||
</label>
|
||||
<input type="text" placeholder="email" className="input input-bordered" />
|
||||
</div>
|
||||
<div className="form-control">
|
||||
<label className="label">
|
||||
<span className="label-text">Password</span>
|
||||
</label>
|
||||
<input type="text" placeholder="password" className="input input-bordered" />
|
||||
<label className="label">
|
||||
<a href="#" className="label-text-alt link link-hover">Forgot password?</a>
|
||||
</label>
|
||||
</div>
|
||||
<div className="form-control mt-6">
|
||||
<button className="btn btn-primary">Login</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default HeroWithForm
|
||||
@@ -1,19 +0,0 @@
|
||||
const HeroWithImage = () => {
|
||||
return <div
|
||||
className="hero min-h-screen"
|
||||
style={{ backgroundImage: 'url(https://daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.jpg)' }}
|
||||
>
|
||||
<div className="hero-overlay bg-opacity-60"></div>
|
||||
<div className="hero-content text-center text-neutral-content">
|
||||
<div className="max-w-md">
|
||||
<h1 className="mb-5 text-5xl font-bold">Hello there</h1>
|
||||
<p className="mb-5">
|
||||
Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.
|
||||
</p>
|
||||
<button className="btn btn-primary">Get Started</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default HeroWithImage
|
||||
@@ -1,31 +0,0 @@
|
||||
const NavBar = () => <div className="drawer">
|
||||
<input id="my-drawer-3" type="checkbox" className="drawer-toggle" />
|
||||
<div className="drawer-content flex flex-col">
|
||||
{/* Navbar */}
|
||||
<div className="w-full navbar bg-base-300 fixed top-0">
|
||||
<div className="flex-none lg:hidden">
|
||||
<label htmlFor="my-drawer-3" className="btn btn-square btn-ghost">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex-1 px-2 mx-2">Navbar Title</div>
|
||||
<div className="flex-none hidden lg:block">
|
||||
<ul className="menu menu-horizontal">
|
||||
{/* Navbar menu content here */}
|
||||
<li><a>Navbar Item 1</a></li>
|
||||
<li><a>Navbar Item 2</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="drawer-side">
|
||||
<label htmlFor="my-drawer-3" className="drawer-overlay"></label>
|
||||
<ul className="menu p-4 w-80 h-full bg-base-200">
|
||||
{/* Sidebar content here */}
|
||||
<li><a>Sidebar Item 1</a></li>
|
||||
<li><a>Sidebar Item 2</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
export default NavBar
|
||||
@@ -1,12 +1,3 @@
|
||||
import NavBar from './components/NavBar'
|
||||
import Hero from './components/Hero'
|
||||
import Footer from './components/Footer'
|
||||
import Divider from './components/Divider'
|
||||
import HeroWithFigure from './components/HeroWithFigure'
|
||||
import HeroWithForm from './components/HeroWithForm'
|
||||
import HeroWithImage from './components/HeroWithImage'
|
||||
import Carousel from './components/Carousel'
|
||||
import ChatBubble from './components/ChatBubble'
|
||||
|
||||
/**
|
||||
* 这是一个空白主题的示例
|
||||
@@ -19,24 +10,26 @@ const THEME_CONFIG = { THEME: 'blank' }
|
||||
*/
|
||||
const LayoutBase = (props) => {
|
||||
const { children } = props
|
||||
console.log('children', children)
|
||||
return <div id='theme-blank'>
|
||||
<NavBar />
|
||||
{children}
|
||||
<Footer />
|
||||
return <div id='theme-blank' className="flex flex-col justify-between">
|
||||
<div id='nav-bar' className="w-full h-12 bg-white text-center fixed top-0 flex justify-between px-12">
|
||||
<div id='logo' className="my-auto">Logo</div>
|
||||
<div id='menu' className="my-auto">Menu</div>
|
||||
</div>
|
||||
<div id='content-wrapper'>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页布局
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
const LayoutIndex = (props) => {
|
||||
console.log('首页')
|
||||
return <LayoutBase {...props}>
|
||||
<Hero />
|
||||
<HeroWithFigure />
|
||||
<HeroWithImage />
|
||||
<Carousel/>
|
||||
<ChatBubble/>
|
||||
<HeroWithForm />
|
||||
<Divider />
|
||||
<div id='hero' className="flex justify-center items-center h-screen">hero-page</div>
|
||||
</LayoutBase>
|
||||
}
|
||||
const LayoutSearch = () => <></>
|
||||
|
||||
@@ -5,7 +5,7 @@ import DarkModeButton from '@/components/DarkModeButton'
|
||||
const Footer = ({ title }) => {
|
||||
const d = new Date()
|
||||
const currentYear = d.getFullYear()
|
||||
const copyrightDate = (function() {
|
||||
const copyrightDate = (function () {
|
||||
if (Number.isInteger(BLOG.SINCE) && BLOG.SINCE < currentYear) {
|
||||
return BLOG.SINCE + '-' + currentYear
|
||||
}
|
||||
@@ -13,24 +13,26 @@ const Footer = ({ title }) => {
|
||||
})()
|
||||
|
||||
return (
|
||||
<footer
|
||||
className='relative z-10 dark:bg-gray-800 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6 bg-white dark:text-gray-400'
|
||||
>
|
||||
<DarkModeButton/>
|
||||
<span>
|
||||
<i className='fas fa-copyright' /> {`${copyrightDate}`} <span className='mx-1 animate-pulse'><i className='fas fa-heart' /></span> <a href={BLOG.LINK} className='underline font-bold '>{BLOG.AUTHOR}</a>.<br />
|
||||
<footer
|
||||
className='relative z-10 dark:bg-gray-800 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-sm p-6 bg-white dark:text-gray-400'
|
||||
>
|
||||
|
||||
{BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br /></>}
|
||||
<span>
|
||||
<DarkModeButton />
|
||||
|
||||
<span className='hidden busuanzi_container_site_pv'>
|
||||
<i className='fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span> </span>
|
||||
<span className='pl-2 hidden busuanzi_container_site_uv'>
|
||||
<i className='fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
|
||||
<br />
|
||||
<h1>{title}</h1>
|
||||
<span className='text-xs font-serif text-gray-500 dark:text-gray-300 '>Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline '>NotionNext {BLOG.VERSION}</a>.</span>
|
||||
</span>
|
||||
</footer>
|
||||
<i className='fas fa-copyright' /> {`${copyrightDate}`} <span className='mx-1 animate-pulse'><i className='fas fa-heart' /></span> <a href={BLOG.LINK} className='underline font-bold '>{BLOG.AUTHOR}</a>.<br />
|
||||
|
||||
{BLOG.BEI_AN && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br /></>}
|
||||
|
||||
<span className='hidden busuanzi_container_site_pv'>
|
||||
<i className='fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span> </span>
|
||||
<span className='pl-2 hidden busuanzi_container_site_uv'>
|
||||
<i className='fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
|
||||
<br />
|
||||
<h1>{title}</h1>
|
||||
<span className='text-xs font-serif text-gray-500 dark:text-gray-300 '>Powered by <a href='https://github.com/tangly1024/NotionNext' className='underline '>NotionNext {BLOG.VERSION}</a>.</span>
|
||||
</span>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user