);
-}
+});
export default BackButton;
diff --git a/src/widgets/MovieDetails/ui/Description.tsx b/src/widgets/MovieDetails/ui/Description.tsx
new file mode 100644
index 0000000..54ce070
--- /dev/null
+++ b/src/widgets/MovieDetails/ui/Description.tsx
@@ -0,0 +1,11 @@
+import { memo, PropsWithChildren } from 'react';
+
+const Description = memo(function Description({ children }: PropsWithChildren) {
+ return (
+
+ {children}
+
+ );
+});
+
+export default Description;
diff --git a/src/widgets/MovieDetails/ui/Director.tsx b/src/widgets/MovieDetails/ui/Director.tsx
new file mode 100644
index 0000000..c024ec6
--- /dev/null
+++ b/src/widgets/MovieDetails/ui/Director.tsx
@@ -0,0 +1,12 @@
+import { memo, PropsWithChildren } from 'react';
+
+const Director = memo(function Director({ children }: PropsWithChildren) {
+ return (
+
+ Directed By:
+ {children}
+
+ );
+});
+
+export default Director;
diff --git a/src/widgets/MovieDetails/ui/Genre.tsx b/src/widgets/MovieDetails/ui/Genre.tsx
new file mode 100644
index 0000000..6e0488d
--- /dev/null
+++ b/src/widgets/MovieDetails/ui/Genre.tsx
@@ -0,0 +1,7 @@
+import { memo, PropsWithChildren } from 'react';
+
+const Genre = memo(function Genre({ children }: PropsWithChildren) {
+ return
{children};
+});
+
+export default Genre;
diff --git a/src/widgets/MovieDetails/ui/Poster.tsx b/src/widgets/MovieDetails/ui/Poster.tsx
new file mode 100644
index 0000000..5055949
--- /dev/null
+++ b/src/widgets/MovieDetails/ui/Poster.tsx
@@ -0,0 +1,19 @@
+import { memo } from 'react';
+
+interface IMoviePosterProps {
+ poster: string;
+ title: string;
+}
+
+const Poster = memo(function Poster({ poster, title }: IMoviePosterProps) {
+ return (
+
+ );
+});
+
+export default Poster;
diff --git a/src/widgets/MovieDetails/ui/Rating.tsx b/src/widgets/MovieDetails/ui/Rating.tsx
new file mode 100644
index 0000000..633a026
--- /dev/null
+++ b/src/widgets/MovieDetails/ui/Rating.tsx
@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+interface IMovieRating {
+ rating: string;
+ votes: string;
+}
+
+const Rating = memo(function Rating({ rating, votes }: IMovieRating) {
+ return (
+
+ ⭐{rating}/10 | 🍿{votes}
+
+ );
+});
+
+export default Rating;
diff --git a/src/widgets/MovieDetails/ui/Runtime.tsx b/src/widgets/MovieDetails/ui/Runtime.tsx
new file mode 100644
index 0000000..ed3b83b
--- /dev/null
+++ b/src/widgets/MovieDetails/ui/Runtime.tsx
@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+interface IMovieRuntime {
+ time: string;
+ year: string;
+}
+
+const Runtime = memo(function Runtime({ time, year }: IMovieRuntime) {
+ return (
+
+ {time} | {year}
+
+ );
+});
+
+export default Runtime;
diff --git a/src/widgets/MovieDetails/ui/Title.tsx b/src/widgets/MovieDetails/ui/Title.tsx
new file mode 100644
index 0000000..9b26e28
--- /dev/null
+++ b/src/widgets/MovieDetails/ui/Title.tsx
@@ -0,0 +1,13 @@
+import { memo, PropsWithChildren } from 'react';
+
+const Title = memo(function Title({ children }: PropsWithChildren) {
+ return (
+
+ {children}
+
+ );
+});
+
+export default Title;
diff --git a/tailwind.config.js b/tailwind.config.js
index 70534ec..6997cea 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -67,13 +67,13 @@ export default {
},
},
animation: {
- 'fade-in': 'fade-in 1s cubic-bezier(0.86, 0, 0.07, 1) both',
+ 'fade-in': 'fade-in 1s cubic-bezier(0.86, 0, 0.07, 1) backwards',
'pagination-fade-in':
- 'pagination-fade-in 1s cubic-bezier(.25,1.55,1,1) both',
+ 'pagination-fade-in 1s cubic-bezier(.25,1.55,1,1) backwards',
springish:
- 'springish 1.72s cubic-bezier(0.445, 0.050, 0.550, 0.950) both',
+ 'springish 1.72s cubic-bezier(0.445, 0.050, 0.550, 0.950) backwards',
'springish-letter':
- 'springish-letter 2.35s cubic-bezier(0.445, 0.050, 0.550, 0.950) both',
+ 'springish-letter 2.35s cubic-bezier(0.445, 0.050, 0.550, 0.950) backwards',
float: 'float 16s ease-in-out infinite',
},
},
diff --git a/tsconfig.json b/tsconfig.json
index b4e1e07..c372cd4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,8 @@
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true
+ "noFallthroughCasesInSwitch": true,
+ "types": ["vitest/globals", "@testing-library/jest-dom"]
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
diff --git a/vite.config.ts b/vite.config.ts
index 86a5fa0..27f8747 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,8 +1,15 @@
-import react from '@vitejs/plugin-react';
+///
+///
+
import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
-// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
- base: './',
+ test: {
+ globals: true,
+ environment: 'happy-dom',
+ setupFiles: './src/test/setup.ts',
+ css: false,
+ },
});