Skip to content

Commit 8b3bc2a

Browse files
FireAndIceFrogFireAndIceFrog
committed
chore: moved style to css file
1 parent 91d5e8f commit 8b3bc2a

4 files changed

Lines changed: 109 additions & 106 deletions

File tree

‎string-art-demo/src/features/3RenderImage/CanvasScreen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useSelector } from "react-redux";
2-
import { StringArtCanvas } from "./components/StringArtCanvas";
2+
import { StringArtCanvas } from "./components/StringArtCanvas/StringArtCanvas";
33
import type { StringArtState } from "../shared/redux/stringArtSlice";
44

55
export default function CanvasScreen() {

string-art-demo/src/features/3RenderImage/components/StringArtCanvas.tsx renamed to string-art-demo/src/features/3RenderImage/components/StringArtCanvas/StringArtCanvas.tsx

Lines changed: 9 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useRef, useEffect, useState } from 'react';
2+
import style from './style.module.css'
23

34
interface StringArtCanvasProps {
45
width: number;
@@ -89,13 +90,13 @@ export const StringArtCanvas: React.FC<StringArtCanvasProps> = ({
8990
}, [width, height, nailCoords, currentPath, showOriginal, imageUrl]);
9091

9192
return (
92-
<div className="string-art-canvas-container">
93-
<div className="canvas-header">
93+
<div className={style['string-art-canvas-container']}>
94+
<div className={style['canvas-header']}>
9495
<h3>String Art Preview</h3>
95-
<div className="canvas-controls">
96-
<button
96+
<div className={style['canvas-controls']}>
97+
<button
9798
onClick={() => setShowOriginal(!showOriginal)}
98-
className="toggle-button"
99+
className={style['toggle-button']}
99100
disabled={!imageUrl}
100101
>
101102
{showOriginal ? 'Show String Art' : 'Show Original'}
@@ -108,112 +109,15 @@ export const StringArtCanvas: React.FC<StringArtCanvasProps> = ({
108109
ref={canvasRef}
109110
width={width}
110111
height={height}
111-
className={`string-art-canvas ${isAnimating ? 'animating' : ''}`}
112+
className={`${style['string-art-canvas']} ${isAnimating ? style['animating'] : ''}`}
112113
/>
113114

114115
{isAnimating && (
115-
<div className="animation-overlay">
116-
<div className="pulse">🎨</div>
116+
<div className={style['animation-overlay']}>
117+
<div className={style['pulse']}>🎨</div>
117118
</div>
118119
)}
119120
</div>
120-
121-
<style>{`
122-
.string-art-canvas-container {
123-
border: 1px solid #ddd;
124-
border-radius: 8px;
125-
overflow: hidden;
126-
background: white;
127-
}
128-
129-
.canvas-header {
130-
display: flex;
131-
justify-content: space-between;
132-
align-items: center;
133-
padding: 1rem;
134-
background: #f8f9fa;
135-
border-bottom: 1px solid #ddd;
136-
}
137-
138-
.canvas-header h3 {
139-
margin: 0;
140-
color: #333;
141-
}
142-
143-
.canvas-controls {
144-
display: flex;
145-
gap: 0.5rem;
146-
}
147-
148-
.toggle-button {
149-
background: #28a745;
150-
color: white;
151-
border: none;
152-
padding: 0.5rem 1rem;
153-
border-radius: 4px;
154-
cursor: pointer;
155-
font-size: 0.875rem;
156-
transition: background 0.3s ease;
157-
}
158-
159-
.toggle-button:hover:not(:disabled) {
160-
background: #218838;
161-
}
162-
163-
.toggle-button:disabled {
164-
background: #ccc;
165-
cursor: not-allowed;
166-
}
167-
168-
.canvas-wrapper {
169-
position: relative;
170-
display: flex;
171-
justify-content: center;
172-
align-items: center;
173-
padding: 1rem;
174-
background: #f9f9f9;
175-
}
176-
177-
.string-art-canvas {
178-
border: 1px solid #ccc;
179-
border-radius: 4px;
180-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
181-
transition: transform 0.3s ease;
182-
}
183-
184-
.string-art-canvas.animating {
185-
transform: scale(1.02);
186-
}
187-
188-
.animation-overlay {
189-
position: absolute;
190-
top: 1rem;
191-
right: 1rem;
192-
background: rgba(255, 255, 255, 0.9);
193-
border-radius: 50%;
194-
width: 3rem;
195-
height: 3rem;
196-
display: flex;
197-
align-items: center;
198-
justify-content: center;
199-
animation: bounce 2s infinite;
200-
}
201-
202-
.pulse {
203-
font-size: 1.5rem;
204-
animation: pulse 1s infinite;
205-
}
206-
207-
@keyframes bounce {
208-
0%, 100% { transform: translateY(0); }
209-
50% { transform: translateY(-10px); }
210-
}
211-
212-
@keyframes pulse {
213-
0%, 100% { transform: scale(1); }
214-
50% { transform: scale(1.2); }
215-
}
216-
`}</style>
217121
</div>
218122
);
219123
};

‎string-art-demo/src/features/3RenderImage/components/StringArtCanvas/style.module.css‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
.string-art-canvas-container {
2+
border: 1px solid #ddd;
3+
border-radius: 8px;
4+
overflow: hidden;
5+
background: white;
6+
}
7+
8+
.canvas-header {
9+
display: flex;
10+
justify-content: space-between;
11+
align-items: center;
12+
padding: 1rem;
13+
background: #f8f9fa;
14+
border-bottom: 1px solid #ddd;
15+
}
16+
17+
.canvas-header h3 {
18+
margin: 0;
19+
color: #333;
20+
}
21+
22+
.canvas-controls {
23+
display: flex;
24+
gap: 0.5rem;
25+
}
26+
27+
.toggle-button {
28+
background: #28a745;
29+
color: white;
30+
border: none;
31+
padding: 0.5rem 1rem;
32+
border-radius: 4px;
33+
cursor: pointer;
34+
font-size: 0.875rem;
35+
transition: background 0.3s ease;
36+
}
37+
38+
.toggle-button:hover:not(:disabled) {
39+
background: #218838;
40+
}
41+
42+
.toggle-button:disabled {
43+
background: #ccc;
44+
cursor: not-allowed;
45+
}
46+
47+
.canvas-wrapper {
48+
position: relative;
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
padding: 1rem;
53+
background: #f9f9f9;
54+
}
55+
56+
.string-art-canvas {
57+
border: 1px solid #ccc;
58+
border-radius: 4px;
59+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
60+
transition: transform 0.3s ease;
61+
}
62+
63+
.string-art-canvas.animating {
64+
transform: scale(1.02);
65+
}
66+
67+
.animation-overlay {
68+
position: absolute;
69+
top: 1rem;
70+
right: 1rem;
71+
background: rgba(255, 255, 255, 0.9);
72+
border-radius: 50%;
73+
width: 3rem;
74+
height: 3rem;
75+
display: flex;
76+
align-items: center;
77+
justify-content: center;
78+
animation: bounce 2s infinite;
79+
}
80+
81+
.pulse {
82+
font-size: 1.5rem;
83+
animation: pulse 1s infinite;
84+
}
85+
86+
@keyframes bounce {
87+
0%, 100% { transform: translateY(0); }
88+
50% { transform: translateY(-10px); }
89+
}
90+
91+
@keyframes pulse {
92+
0%, 100% { transform: scale(1); }
93+
50% { transform: scale(1.2); }
94+
}

‎string-art-demo/src/vite-env.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
11
/// <reference types="vite/client" />
2+
3+
declare module '*.css' {
4+
const content: { [className: string]: string };
5+
export default content;
6+
}

0 commit comments

Comments
 (0)