feat: homets 化 创建类型定义文件
创建常量配置文件 创建自定义 Hook 创建组件目录 创建 HeroHeader 组件 创建 FeaturedFeatureCard 组件 创建 FeatureCard 组件 创建新的 HomePage.tsx
This commit is contained in:
57
src/hooks/useHomeResponsive.ts
Normal file
57
src/hooks/useHomeResponsive.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
// src/hooks/useHomeResponsive.ts
|
||||
// 首页响应式配置 Hook
|
||||
|
||||
import { useBreakpointValue } from '@chakra-ui/react';
|
||||
import type { ResponsiveConfig } from '@/types/home';
|
||||
|
||||
/**
|
||||
* 首页响应式配置 Hook
|
||||
* 集中管理所有响应式断点值
|
||||
*
|
||||
* @returns 响应式配置对象
|
||||
*/
|
||||
export const useHomeResponsive = (): ResponsiveConfig => {
|
||||
const heroHeight = useBreakpointValue({
|
||||
base: '60vh',
|
||||
md: '80vh',
|
||||
lg: '100vh'
|
||||
});
|
||||
|
||||
const headingSize = useBreakpointValue({
|
||||
base: 'xl',
|
||||
md: '3xl',
|
||||
lg: '4xl'
|
||||
});
|
||||
|
||||
const headingLetterSpacing = useBreakpointValue({
|
||||
base: '-1px',
|
||||
md: '-1.5px',
|
||||
lg: '-2px'
|
||||
});
|
||||
|
||||
const heroTextSize = useBreakpointValue({
|
||||
base: 'md',
|
||||
md: 'lg',
|
||||
lg: 'xl'
|
||||
});
|
||||
|
||||
const containerPx = useBreakpointValue({
|
||||
base: 10,
|
||||
md: 10,
|
||||
lg: 10
|
||||
});
|
||||
|
||||
const showDecorations = useBreakpointValue({
|
||||
base: false,
|
||||
md: true
|
||||
});
|
||||
|
||||
return {
|
||||
heroHeight,
|
||||
headingSize,
|
||||
headingLetterSpacing,
|
||||
heroTextSize,
|
||||
containerPx,
|
||||
showDecorations
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user