lint and format
This commit is contained in:
@ -5,7 +5,7 @@ import SocialIcon from '@/components/social-icons'
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="flex flex-col items-center mt-16">
|
||||
<div className="flex space-x-4 mb-3">
|
||||
<div className="flex mb-3 space-x-4">
|
||||
<SocialIcon kind="mail" href={`mailto:${siteMetadata.email}`} size="6" />
|
||||
<SocialIcon kind="github" href={siteMetadata.github} size="6" />
|
||||
<SocialIcon kind="facebook" href={siteMetadata.facebook} size="6" />
|
||||
@ -13,14 +13,14 @@ export default function Footer() {
|
||||
<SocialIcon kind="linkedin" href={siteMetadata.linkedin} size="6" />
|
||||
<SocialIcon kind="twitter" href={siteMetadata.twitter} size="6" />
|
||||
</div>
|
||||
<div className="flex space-x-2 mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div className="flex mb-2 space-x-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div>{siteMetadata.author}</div>
|
||||
<div>{` • `}</div>
|
||||
<div>{`© ${new Date().getFullYear()}`}</div>
|
||||
<div>{` • `}</div>
|
||||
<Link href="/">{siteMetadata.title}</Link>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 mb-8">
|
||||
<div className="mb-8 text-sm text-gray-500 dark:text-gray-400">
|
||||
<Link href="https://github.com/timlrx/tailwind-nextjs-starter-blog">
|
||||
Tailwind Nextjs Theme
|
||||
</Link>
|
||||
|
@ -10,16 +10,16 @@ import ThemeSwitch from './ThemeSwitch'
|
||||
const LayoutWrapper = ({ children }) => {
|
||||
return (
|
||||
<SectionContainer>
|
||||
<div className="flex flex-col h-screen justify-between">
|
||||
<header className="flex justify-between items-center py-10">
|
||||
<div className="flex flex-col justify-between h-screen">
|
||||
<header className="flex items-center justify-between py-10">
|
||||
<div>
|
||||
<Link href="/" aria-label="Tailwind CSS Blog">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="mr-3">
|
||||
<Logo />
|
||||
</div>
|
||||
{typeof siteMetadata.headerTitle === 'string' ? (
|
||||
<div className="hidden sm:block h-6 text-2xl font-semibold">
|
||||
<div className="hidden h-6 text-2xl font-semibold sm:block">
|
||||
{siteMetadata.headerTitle}
|
||||
</div>
|
||||
) : (
|
||||
@ -34,7 +34,7 @@ const LayoutWrapper = ({ children }) => {
|
||||
<Link
|
||||
key={link.title}
|
||||
href={link.href}
|
||||
className="p-1 sm:p-4 font-medium text-gray-900 dark:text-gray-100"
|
||||
className="p-1 font-medium text-gray-900 sm:p-4 dark:text-gray-100"
|
||||
>
|
||||
{link.title}
|
||||
</Link>
|
||||
|
@ -1,3 +1,4 @@
|
||||
/* eslint-disable jsx-a11y/anchor-has-content */
|
||||
import Link from 'next/link'
|
||||
|
||||
const CustomLink = ({ href, ...rest }) => {
|
||||
|
@ -21,7 +21,7 @@ const MobileNav = () => {
|
||||
<div className="sm:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded ml-1 mr-1 h-8 w-8"
|
||||
className="w-8 h-8 ml-1 mr-1 rounded"
|
||||
aria-label="Toggle Menu"
|
||||
onClick={onToggleNav}
|
||||
>
|
||||
@ -54,12 +54,12 @@ const MobileNav = () => {
|
||||
<button
|
||||
type="button"
|
||||
aria-label="toggle modal"
|
||||
className="w-full h-full fixed cursor-auto focus:outline-none"
|
||||
className="fixed w-full h-full cursor-auto focus:outline-none"
|
||||
onClick={onToggleNav}
|
||||
></button>
|
||||
<nav className="h-full mt-8 fixed">
|
||||
<nav className="fixed h-full mt-8">
|
||||
{headerNavLinks.map((link) => (
|
||||
<div key={link.title} className="py-4 px-12">
|
||||
<div key={link.title} className="px-12 py-4">
|
||||
<Link
|
||||
href={link.href}
|
||||
className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
|
||||
|
@ -1,6 +1,6 @@
|
||||
export default function PageTitle({ children }) {
|
||||
return (
|
||||
<h1 className="text-3xl leading-9 font-extrabold text-gray-900 dark:text-gray-100 tracking-tight sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
|
||||
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
|
||||
{children}
|
||||
</h1>
|
||||
)
|
||||
|
@ -1,3 +1,3 @@
|
||||
export default function SectionContainer({ children }) {
|
||||
return <div className="max-w-3xl mx-auto px-4 sm:px-6 xl:max-w-5xl xl:px-0">{children}</div>
|
||||
return <div className="max-w-3xl px-4 mx-auto sm:px-6 xl:max-w-5xl xl:px-0">{children}</div>
|
||||
}
|
||||
|
@ -4,7 +4,7 @@ import kebabCase from 'just-kebab-case'
|
||||
const Tag = ({ text }) => {
|
||||
return (
|
||||
<Link href={`/tags/${kebabCase(text)}`}>
|
||||
<a className="uppercase text-sm font-medium text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
|
||||
<a className="text-sm font-medium text-blue-500 uppercase hover:text-blue-600 dark:hover:text-blue-400">
|
||||
{text.split(' ').join('-')}
|
||||
</a>
|
||||
</Link>
|
||||
|
@ -7,7 +7,7 @@ const ThemeSwitch = () => {
|
||||
<button
|
||||
aria-label="Toggle Dark Mode"
|
||||
type="button"
|
||||
className="rounded ml-1 mr-1 sm:ml-4 p-1 h-8 w-8"
|
||||
className="w-8 h-8 p-1 ml-1 mr-1 rounded sm:ml-4"
|
||||
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||
>
|
||||
<svg
|
||||
|
@ -21,7 +21,7 @@ const SocialIcon = ({ kind, href, size = 8 }) => {
|
||||
|
||||
return (
|
||||
<a
|
||||
className="text-sm text-gray-500 hover:text-gray-600 transition"
|
||||
className="text-sm text-gray-500 transition hover:text-gray-600"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href={href}
|
||||
|
Reference in New Issue
Block a user