搭建个人知识付费应用系统-(5)Header、Footer 样式组件

视频地址： https://www.bilibili.com/vide...

基础样式

如鼠标指针、背景图片等。

鼠标指针

* {
    cursor: url('/default.cur'), default;
}

a,
a *,
button,
button *,
.btn,
.btn *,
.prose .post-image {
    cursor: url('/pointer.cur'), pointer;
}

背景图片切换

@layer components {
  #background {
    @apply fixed inset-0 saturate-150 z-[-1];
    background: url('/images/bg.jpg') no-repeat center center fixed;
    background-size: cover;
    transition: all 0.25s ease-in-out;
    transform-style: preserve-3d;
  }
  #background.dark {
    @apply brightness-50 saturate-100;
    transform: rotate(-3deg) scale(1.2);
    /* scaleX(-1); */
  }
}

Header

Link 封装

locale-link:

import {
  Link,
  type LinkProps,
  NavLink,
  type NavLinkProps
} from '@remix-run/react';
import { useI18n } from 'remix-i18n';

export function LocaleLink({
  to,
  children,
  ...props
}: LinkProps & { to: string }) {
  const i18n = useI18n();
  const path = `/${i18n.locale()}${to}`;

  return (
    
      {children}
    
  );
}

export function LocaleNavLink({
  to,
  children,
  ...props
}: NavLinkProps & { to: string }) {
  const i18n = useI18n();
  const path = `/${i18n.locale()}${to}`;

  return (
    
      {children}
    
  );
}

router-link：

import { type NavLinkProps } from '@remix-run/react';
import clsx from 'classnames';
import { LocaleNavLink } from './locale-link';

export function RouteLink({
  children,
  to
}: Pick) {
  return LocaleNavLink({
    to,
    className: ({ isActive }) =>
      clsx(isActive ? 'glass' : 'btn-ghost', 'btn btn-sm rounded-btn'),
    children
  });
}

header 组件：

import { useI18n } from 'remix-i18n';
import { LocaleLink } from './atom/locale-link';
import { RouteLink } from './atom/router-link';
import { ToggleLocale } from './atom/toggle-locale';
import { ToggleTheme } from './atom/toggle-theme';

export function Header() {
  const i18n = useI18n();
  const { t } = i18n;

  return (
    

      

        

          
            Willin Wang
          
        
        

          

            {t('nav.home')}
            {t('nav.posts')}
            {t('nav.projects')}
            {t('nav.playground')}
            {t('nav.about')}
          
        
        

          
          
        
      
    
  );
}

Footer

// import { useMatches } from '@remix-run/react';
// import clsx from 'classnames';
import { useI18n } from 'remix-i18n';
import { LocaleLink } from './atom/locale-link';
import { Github, CSDN, Juejin, SegmentFault, WillinLogo, Zhihu } from './svg';

export function Footer() {
  const { t } = useI18n();
  // const matches = useMatches();

  return (
    

      

        

          
            
          
        
        

          {/* 

            

              {posts
                .filter((x) => x.type === 'pages')
                .map((page) => (
                  

                    {page.title}
                  
                ))}
            
          
 */}
          

            

              

                {t('nav.home')}
              
              

                {t('nav.posts')}
              
              

                {t('nav.playground')}
              
            
          

          {/* 

            

              

                
                  Privacy Policy
                
              
              

                
                  Terms & Conditions
                
              
            
          
 */}
        
      
      

      

        
          Willin Wang © 2002 ~ {new Date().getFullYear()}.
          
            Made with ❤️ and{' '}
            
              Remix
            {' '}
            |{' '}
            
              苏ICP备17011988号-1
            
          
        
        

          
            
          

          
            
          
          
            
          

          
            
          

          
            
          
        
      
    
  );
}