chore: replace read more link with ButtonLink component

I also fix the load more button position since I removed the margin
auto.

3 files changed, 27 insertions, 0 deletions

diff --git a/src/components/Icons/Arrow/Arrow.module.scss b/src/components/Icons/Arrow/Arrow.module.scss
new file mode 100644
index 0000000..49e9b02
--- /dev/null
+++ b/src/components/Icons/Arrow/Arrow.module.scss
@@ -0,0 +1,7 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  fill: var(--color-primary);
+  width: var(--icon-size, #{fun.convert-px(30)});
+  transition: all 0.25s ease-in-out 0s;
+}
diff --git a/src/components/Icons/Arrow/Arrow.tsx b/src/components/Icons/Arrow/Arrow.tsx
new file mode 100644
index 0000000..61edfca
--- /dev/null
+++ b/src/components/Icons/Arrow/Arrow.tsx
@@ -0,0 +1,18 @@
+import styles from './Arrow.module.scss';
+
+const ArrowIcon = () => {
+  return (
+    <svg
+      className={styles.icon}
+      viewBox="0 0 64.644997 23.476001"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m 0,15.45 40.008,-0.018 v 8.044 L 64.645,11.715 39.845,0 V 8.044 L 0,8.186 Z"
+        id="path2"
+      />
+    </svg>
+  );
+};
+
+export default ArrowIcon;
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
index 9144619..1594775 100644
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -1,3 +1,4 @@
+import ArrowIcon from './Arrow/Arrow';
 import BlogIcon from './Blog/Blog';
 import CloseIcon from './Close/Close';
 import ContactIcon from './Contact/Contact';
@@ -10,6 +11,7 @@ import SunIcon from './Sun/Sun';
 import ThemeIcon from './Theme/Theme';
 
 export {
+  ArrowIcon,
   BlogIcon,
   CloseIcon,
   ContactIcon,