Merge pull request #63 from sovware/development

Single Template - Updated
sovware · Aug 22, 2024 · 0b70399 · 0b70399
2 parents 9783087 + db91cd0
commit 0b70399
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 34 deletions.
diff --git a/src/js/components/SingleTemplate/index.js b/src/js/components/SingleTemplate/index.js
@@ -4,10 +4,10 @@ import InsertTemplate from '@components/InsertTemplate';
 import store from '@store/index';
 import { select } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import ReactSVG from 'react-inlinesvg';
 import { Link } from 'react-router-dom';
 import { SingleTemplateStyle } from './style';
-import { __ } from '@wordpress/i18n';
 
 import crownIcon from '@icon/crown.svg';
 import downloadIcon from '@icon/download-alt.svg';
@@ -54,19 +54,13 @@ const SingleTemplate = ( item ) => {
 	const templateRef = useRef( null );
 
 	useEffect( () => {
-		const libraryData = select( store ).getLibraryData();
-
-		const availableCategories = categories.map(
-			( key ) => libraryData.categories[ key ]
-		);
-
 		const visibleCategories =
-			availableCategories.length < 3
-				? availableCategories
-				: availableCategories.slice( 0, 2 );
+			categories.length < 3
+				? categories
+				: categories.slice( 0, 2 );
 
 		// Categories for the dropdown (if any)
-		const hiddenCategories = availableCategories.slice( 2 );
+		const hiddenCategories = categories.slice( 2 );
 
 		setDisplayedCategories( visibleCategories );
 		setDropdownCategories( hiddenCategories );
@@ -179,7 +173,7 @@ const SingleTemplate = ( item ) => {
 					</Link>
 				</h3>
 				<div className="templatiq__template__single__cat">
-					{ displayedCategories.map( ( category, index ) => (
+					{ displayedCategories.length && displayedCategories.map( ( category, index ) => (
 						<a
 							key={ index }
 							href="#"
@@ -216,30 +210,35 @@ const SingleTemplate = ( item ) => {
 						</div>
 					) }
 				</div>
-				<div className="templatiq__template__single__quickmeta">
-					{ price > 0 ? (
-						<span className="templatiq__template__single__quickmeta__item pro-item">
-							{ `${ price ? '$' + price : '' }` }
-						</span>
-					) : (
-						<span className="templatiq__template__single__quickmeta__item free-item">
-							{__( "Free", 'templatiq' )}
-						</span>
-					) }
+				<div className="templatiq__template__single__quickmeta-wrapper">
+					<div className="templatiq__template__single__quickmeta">
+						{ price > 0 ? (
+							<span className="templatiq__template__single__quickmeta__item pro-item">
+								{ `${ price ? '$' + price : '' }` }
+							</span>
+						) : (
+							<span className="templatiq__template__single__quickmeta__item free-item">
+								{__( "Free", 'templatiq' )}
+							</span>
+						) }
 
-					<span
-						className="templatiq__template__single__quickmeta__item templatiq-tooltip"
-						data-info={__( "Total Downloads", 'templatiq' )}
-					>
-						<ReactSVG
-							src={ downloadIcon }
-							width={ 14 }
-							height={ 14 }
-						/>
-						{ number_of_downloads ? number_of_downloads : '' }
-					</span>
+						<span
+							className="templatiq__template__single__quickmeta__item templatiq-tooltip"
+							data-info={__( "Total Downloads", 'templatiq' )}
+						>
+							<ReactSVG
+								src={ downloadIcon }
+								width={ 14 }
+								height={ 14 }
+							/>
+							{ number_of_downloads ? number_of_downloads : '' }
+						</span>
 
-					<Bookmark item={ item } />
+						<Bookmark item={ item } />
+					</div>
+					<Link to={ `/template/${ slug }` } className="templatiq-btn templatiq-btn-primary-transparent">
+						{ __( 'View Details', 'templatiq' ) }
+					</Link>
 				</div>
 			</div>
 		</SingleTemplateStyle>

diff --git a/src/js/components/SingleTemplate/style.js b/src/js/components/SingleTemplate/style.js
@@ -211,9 +211,28 @@ const SingleTemplateStyle = Styled.div`
         flex-direction: column;
     }
 
+    .templatiq__template__single__quickmeta-wrapper {
+        display: flex;
+        gap: 6px;
+        justify-content: space-between;
+        .templatiq-btn {
+            height: 44px;
+            padding: 0 16px;
+            font-size: 16px;
+            font-weight: 600;
+            border-radius: 10px;
+            color: var(--templatiq-primary-color);
+            background-color: var(--templatiq-primary-100);
+            &:hover {
+                color: var(--templatiq-white-color);
+                background-color: var(--templatiq-primary-color);
+            }
+        }
+    }
     .templatiq__template__single__quickmeta {
         display: flex;
         gap: 6px;
+        align-items: center;
     }
     .templatiq__template__single__quickmeta__item {
         display: flex;

diff --git a/src/sass/global.scss b/src/sass/global.scss
@@ -21,6 +21,7 @@
   --templatiq-pro-color: #f17d0e;
   --templatiq-pro-color2: #d16a0a;
 
+  --templatiq-primary-100: #e8e3fe;
   --templatiq-primary-transparent: #f2ecff;
   --templatiq-primary-transparent2: #d5c4ff;
 
@@ -211,6 +212,14 @@ button {
       }
     }
   }
+  &.templatiq-btn-primary-transparent {
+    color: var(--templatiq-primary-color);
+    background-color: var(--templatiq-primary-transparent);
+    &:hover {
+      color: var(--templatiq-white-color);
+      background-color: var(--templatiq-primary-color);
+    }
+  }
   &.templatiq-btn-success {
     background-color: var(--templatiq-success-color);
     color: var(--templatiq-white-color);
@@ -402,6 +411,7 @@ button {
   justify-content: center;
   width: 36px;
   height: 36px;
+  padding: 0;
   border-radius: 50%;
   position: absolute;
   top: 20px;