add buttons

docs/games/yass/share.mdx

@@ -0,0 +1,27 @@
+---
+id: solitaire-share
+title: Download Y.A.S.S
+sidebar_label: Download
+slug: /game/solitaire/share
+---
+
+import GooglePlayButton from '@theme/GooglePlayButton';
+import ButtonsContainer from '@theme/ButtonsContainer';
+import AppStoreButon from '@theme/AppStoreButton';
+
+    <div className="row">
+        <ButtonsContainer>
+            <GooglePlayButton
+                url={"https://play.google.com/store/apps/details?id=host"}
+                theme={"light"}
+                className={"custom-style"}
+            />
+
+            <AppStoreButon
+                url={"https://apps.apple.com/us/app/y-a-s-s/id6472488148"}
+                theme={"light"}
+                className={"custom-style"}
+            />
+        </ButtonsContainer>
+
+    </div>

package.json

@@ -21,26 +21,27 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@abrookins-redis/redis-sitesearch-frontend": "^1.0.2",
-    "@docusaurus/core": "2.2.0",
-    "@docusaurus/plugin-content-pages": "2.2.0",
-    "@docusaurus/plugin-sitemap": "2.2.0",
-    "@docusaurus/preset-classic": "2.2.0",
-    "@docusaurus/theme-search-algolia": "2.2.0",
-    "@mdx-js/react": "^1.6.22",
+    "@docusaurus/core": "3.0.0",
+    "@docusaurus/plugin-content-pages": "3.0.0",
+    "@docusaurus/plugin-sitemap": "3.0.0",
+    "@docusaurus/preset-classic": "3.0.0",
+    "@docusaurus/theme-search-algolia": "3.0.0",
+    "@mdx-js/react": "^3.0.0",
     "clsx": "^1.2.1",
-    "docusaurus-plugin-sass": "^0.2.2",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "docusaurus-plugin-sass": "^0.2.5",
+    "prism-react-renderer": "^2.1.0",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
+    "react-mobile-app-button": "^1.2.17",
     "react-scroll": "^1.8.8",
     "react-slick": "^0.29.0",
     "sass": "^1.55.0",
     "typed.js": "^2.0.12"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.2.0",
-    "@tsconfig/docusaurus": "^1.0.6",
+    "@docusaurus/module-type-aliases": "3.0.0",
+    "@docusaurus/types": "3.0.0",
+    "@tsconfig/docusaurus": "^2.0.2",
     "@types/react-slick": "^0.23.10",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
@@ -51,7 +52,7 @@
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "prettier": "^2.7.1",
     "prettier-linter-helpers": "^1.0.0",
-    "typescript": "^4.8.4"
+    "typescript": "^5.3.2"
   },
   "browserslist": {
     "production": [

src/theme/AppStoreButton/index.tsx

@@ -0,0 +1,78 @@
+import React, { FC } from 'react';
+
+import Button from '../Button';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import { useColorMode } from '@docusaurus/theme-common';
+
+type AppStoreButtonProps = {
+  /**
+   * @default dark
+   */
+  theme?: 'dark' | 'light';
+
+  /**
+   * @default Download on the
+   */
+  title?: string;
+
+  /**
+   * @default 60px
+   */
+  height?: number;
+
+  /**
+   * @default 180px
+   */
+  width?: number;
+
+  /**
+   * @default ''
+   */
+  className?: string;
+
+  /**
+   * @default ''
+   */
+  url: string;
+};
+
+/**
+ *
+ * @param {string} theme Choose a theme between dark and light
+ * @param {number} height Controls the height of the button
+ * @param {number} width Controls the width of the button
+ * @param {string} title Set custom title for the button
+ * @param {string} className Add className to the button in order to customize the button appearance
+ * @param {string} url Add your store url to the button
+ * @example <AppStoreButton theme="light" height={70} width={130} className="button-container" url="https://www.apple.com/app-store/" />
+ * @returns
+ */
+const AppStoreButton: FC<AppStoreButtonProps> = ({
+  theme = 'light',
+  height,
+  title = 'Download on the',
+  width,
+  className,
+  url,
+}) => {
+  const { colorMode } = useColorMode();
+  return (
+    <Button
+      theme={theme}
+      height={height}
+      width={width}
+      url={url}
+      storeName={'App Store'}
+      logo={
+        colorMode === 'light'
+          ? useBaseUrl('/img/Apple.svg')
+          : useBaseUrl('/img/Apple-light.svg')
+      }
+      className={className}
+      title={title}
+    />
+  );
+};
+
+export default AppStoreButton;

src/theme/Button/button.css

@@ -0,0 +1,38 @@
+@import url("https://fonts.googleapis.com/css2?family=Outfit&display=swap");
+
+:root {
+  --primary-color: #202020;
+  --secondary-color: #fff;
+}
+
+.button-container {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  gap: 10px;
+  cursor: pointer;
+
+  border: 2px solid var(--primary-color);
+  border-radius: 10px;
+}
+
+.button-container-dark {
+  background-color: var(--primary-color);
+  color: var(--secondary-color);
+}
+
+.button-text-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-family: "Outfit", sans-serif;
+}
+
+.button-store-name {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.button-title {
+  font-size: 12px;
+}

src/theme/Button/index.tsx

@@ -0,0 +1,46 @@
+import React, { FC } from 'react';
+
+import './button.css';
+
+type ButtonProps = {
+  theme?: 'dark' | 'light';
+  height?: number;
+  width?: number;
+  logo: string;
+  storeName: string;
+  title: string;
+  url: string;
+  className?: string;
+  border?: number;
+};
+
+const Button: FC<ButtonProps> = ({
+  theme = 'light',
+  height = 50,
+  width = 180,
+  border,
+  logo,
+  storeName,
+  title,
+  url,
+  className,
+}) => {
+  return (
+    <div
+      onClick={() => url && window.open(url, '_blank')}
+      style={{
+        height: height,
+        width: width,
+        borderRadius: border,
+      }}
+      className={`button-container button-container-${theme} ${className}`}>
+      <img src={logo} alt={storeName} />
+      <div className="button-text-container">
+        <span className="button-title">{title}</span>
+        <span className="button-store-name">{storeName}</span>
+      </div>
+    </div>
+  );
+};
+
+export default Button;

src/theme/ButtonsContainer/buttonsContainer.css

@@ -0,0 +1,5 @@
+.buttons-container {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}

src/theme/ButtonsContainer/index.tsx

@@ -0,0 +1,42 @@
+import React, { FC, ReactNode } from 'react';
+
+import './buttonsContainer.css';
+
+type ButtonsContainerProps = {
+  /**
+   * @default ''
+   */
+  gap?: number;
+
+  /**
+   * @default row
+   */
+  direction?: 'row' | 'column';
+  children: ReactNode;
+};
+
+/**
+ *
+ * @param {number} gap Add additional spacing between buttons
+ * @param {string} direction Change direction of the buttons between column and row
+ * @example <ButtonsContainer gap={10} direction="column"> <GooglePlayButton/> <AppGalleryButton/> </ButtonsContainer>
+ * @returns
+ */
+const ButtonsContainer: FC<ButtonsContainerProps> = ({
+  children,
+  gap,
+  direction = 'row',
+}) => {
+  return (
+    <div
+      className="buttons-container"
+      style={{
+        gap: gap,
+        flexDirection: direction,
+      }}>
+      {children}
+    </div>
+  );
+};
+
+export default ButtonsContainer;

src/theme/GooglePlayButton/index.tsx

@@ -0,0 +1,73 @@
+import React, { FC } from 'react';
+
+// import GooglePlay from '';
+import Button from '../Button';
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+type GooglePlayButtonProps = {
+  /**
+   * @default dark
+   */
+  theme?: 'dark' | 'light';
+
+  /**
+   * @default GET IT ON
+   */
+  title?: string;
+
+  /**
+   * @default 60px
+   */
+  height?: number;
+
+  /**
+   * @default 180px
+   */
+  width?: number;
+
+  /**
+   * @default ''
+   */
+  className?: string;
+
+  /**
+   * @default ''
+   */
+  url: string;
+};
+
+/**
+ *
+ * @param {string} theme Choose a theme between dark and light
+ * @param {number} height Controls the height of the button
+ * @param {number} width Controls the width of the button
+ * @param {string} title Set custom title for the button
+ * @param {string} className Add className to the button in order to customize the button appearance
+ * @param {string} url Add your store url to the button
+ * @example <GooglePlayButton theme="light" height={70} width={130} className="button-container" url="https://play.google.com/" />
+ * @returns
+ */
+const GooglePlayButton: FC<GooglePlayButtonProps> = ({
+  theme = 'light',
+  height,
+  title = 'GET IT ON',
+  width,
+  className,
+  url,
+}) => {
+  return (
+    <Button
+      theme={theme}
+      height={height}
+      width={width}
+      url={url}
+      storeName={'Google Play'}
+      logo={useBaseUrl('/img/Google-Play.svg')}
+      className={className}
+      title={title}
+    />
+  );
+};
+
+export default GooglePlayButton;