From bf34f482f15a156f1aff11634e520d213471d003 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Mon, 23 Jan 2023 19:27:17 +0500
Subject: [PATCH] video link

---
 src/animations/video.animations.ts     | 18 ++++++++++++++++++
 src/assets/icons/arrow-right-white.svg | 10 ++++++++++
 src/components/video/Video.tsx         | 16 ++++++++++++++++
 src/styles/_video.scss                 | 25 +++++++++++++++++++++++++
 4 files changed, 69 insertions(+)
 create mode 100644 src/animations/video.animations.ts
 create mode 100644 src/assets/icons/arrow-right-white.svg

diff --git a/src/animations/video.animations.ts b/src/animations/video.animations.ts
new file mode 100644
index 0000000..6392602
--- /dev/null
+++ b/src/animations/video.animations.ts
@@ -0,0 +1,18 @@
+export const videoArrowMotion: Record<
+  string,
+  Record<string, string | number | Record<string, string | number>>
+> = {
+  rest: {
+    duration: 0.3,
+    type: "spring",
+    x: 0,
+  },
+
+  hover: {
+    x: 10,
+    transition: {
+      duration: 0.2,
+      type: "tween",
+    },
+  },
+};
diff --git a/src/assets/icons/arrow-right-white.svg b/src/assets/icons/arrow-right-white.svg
new file mode 100644
index 0000000..c706875
--- /dev/null
+++ b/src/assets/icons/arrow-right-white.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_38_3489)">
+<path d="M10.6667 7.99998C10.667 8.15575 10.6127 8.3067 10.5133 8.42665L7.18001 12.4266C7.06685 12.5628 6.90424 12.6484 6.72796 12.6647C6.55168 12.6809 6.37616 12.6265 6.24001 12.5133C6.10387 12.4002 6.01825 12.2375 6.002 12.0613C5.98574 11.885 6.04018 11.7095 6.15334 11.5733L9.14001 7.99998L6.26001 4.42665C6.20463 4.35845 6.16328 4.27999 6.13832 4.19576C6.11337 4.11154 6.10531 4.02321 6.1146 3.93586C6.12389 3.84851 6.15036 3.76385 6.19247 3.68676C6.23459 3.60967 6.29153 3.54166 6.36001 3.48664C6.42856 3.42559 6.50898 3.37935 6.59622 3.35082C6.68347 3.3223 6.77567 3.31209 6.86705 3.32086C6.95843 3.32962 7.04701 3.35715 7.12724 3.40174C7.20748 3.44633 7.27765 3.50701 7.33334 3.57998L10.5533 7.57998C10.637 7.70337 10.6769 7.85124 10.6667 7.99998Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_38_3489">
+<rect width="16" height="16" fill="white" transform="translate(0 16) rotate(-90)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/video/Video.tsx b/src/components/video/Video.tsx
index edbc17a..037d283 100644
--- a/src/components/video/Video.tsx
+++ b/src/components/video/Video.tsx
@@ -1,5 +1,7 @@
 // Modules
 import { v4 as uuidv4 } from "uuid";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
 
 // Components
 import VideoItem from "./VideoItem";
@@ -7,6 +9,12 @@ import VideoItem from "./VideoItem";
 // Images
 import VideoItemImg from "../../assets/images/video-item.jpg";
 
+// Icons
+import { ReactComponent as ArrowRightWhite } from "../../assets/icons/arrow-right-white.svg";
+
+// Animations
+import { videoArrowMotion } from "../../animations/video.animations";
+
 const Video = () => {
   const date = "11.01.2023";
   const title = "В Туркменистане отметили Новый год";
@@ -33,6 +41,14 @@ const Video = () => {
               );
             })}
           </div>
+          <Link to="/videos" className="video-link">
+            <motion.div initial={"rest"} whileHover={"hover"} className="inner">
+              <span>Показать все видео</span>
+              <motion.div className="arrow-div" variants={videoArrowMotion}>
+                <ArrowRightWhite />
+              </motion.div>
+            </motion.div>
+          </Link>
         </div>
       </div>
     </section>
diff --git a/src/styles/_video.scss b/src/styles/_video.scss
index 675436f..24119ce 100644
--- a/src/styles/_video.scss
+++ b/src/styles/_video.scss
@@ -53,3 +53,28 @@
     line-height: 2.2rem;
   }
 }
+
+.video-link {
+  max-width: fit-content;
+  border-radius: 0.5rem;
+  background: $main;
+  .inner {
+    font-size: 1.6rem;
+    color: $white;
+    padding: 0.8rem 1.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 1.6rem;
+  }
+
+  .arrow-div {
+    display: flex;
+    align-items: center;
+  }
+
+  svg {
+    width: 1.6rem;
+    height: 1.6rem;
+  }
+}