88 lines
1.7 KiB
Markdown
88 lines
1.7 KiB
Markdown
# 📝 Code Examples
|
||
|
||
## Создание компонента
|
||
|
||
### Feature компонент
|
||
|
||
```typescript
|
||
// features/your-card.tsx
|
||
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
import { Card } from "@/shared/ui/card";
|
||
|
||
interface YourCardProps {
|
||
title: string;
|
||
description: string;
|
||
}
|
||
|
||
export function YourCard({ title, description }: YourCardProps) {
|
||
return (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<Card className="p-6">
|
||
<h3 className="text-2xl font-bold">{title}</h3>
|
||
<p>{description}</p>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
}
|
||
```
|
||
|
||
### Widget секция
|
||
|
||
```typescript
|
||
// widgets/your-section.tsx
|
||
"use client";
|
||
|
||
import { SectionContainer } from "@/features/section-container";
|
||
import { SectionHeader } from "@/features/section-header";
|
||
|
||
export function YourSection() {
|
||
return (
|
||
<SectionContainer id="your-section">
|
||
<SectionHeader title="Заголовок" withGradient />
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
{/* Контент */}
|
||
</div>
|
||
</SectionContainer>
|
||
);
|
||
}
|
||
```
|
||
|
||
## Работа с состоянием
|
||
|
||
```typescript
|
||
"use client";
|
||
|
||
import { useState } from "react";
|
||
|
||
export function Counter() {
|
||
const [count, setCount] = useState(0);
|
||
return (
|
||
<div>
|
||
<p>Count: {count}</p>
|
||
<button onClick={() => setCount(count + 1)}>Increment</button>
|
||
</div>
|
||
);
|
||
}
|
||
```
|
||
|
||
## Анимации
|
||
|
||
### Fade in + Slide up
|
||
|
||
```typescript
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
Content
|
||
</motion.div>
|
||
```
|