Skip to content

sujata / Akruti-Frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit d5fb7fdb by Ravindra Kanojiya
Options

all pages updated

1 parent 90030a0b
Inline Side-by-side
Showing 6 changed files with 129 additions and 17 deletions
components/Brands/InnerDetailsBrands.js
......@@ -3,6 +3,7 @@ import Link from "next/link";
import React, { useState } from "react";
import { Col, Row } from "react-bootstrap";
import { useRouter } from "next/router";
import FilterButton from "../Common/FilterButton";
const InnerDetailsBrands = ({ subCategories }) => {
const router = useRouter();
......@@ -17,12 +18,24 @@ const InnerDetailsBrands = ({ subCategories }) => {
// Safety check
if (!subCategories || !category) return null;
// Optional sorting
const sortedProducts = [...subCategories].sort((a, b) => {
if (sort === "name-asc") {
return a.subCategoryName.localeCompare(b.subCategoryName);
}
if (sort === "name-desc") {
return b.subCategoryName.localeCompare(a.subCategoryName);
}
return 0;
});
return (
<section className="collection-m-section sec_padd">
<div className="custom_container">
{/* Header Row */}
<Row>
<Row className="align-content-center">
<Col xs={6}>
<h3>
{category
......@@ -33,24 +46,36 @@ const InnerDetailsBrands = ({ subCategories }) => {
</Col>
<Col xs={6} className="d-flex justify-content-end">
<div className="sortby-wrapper">
<select
className="sortby-select"
value={sort}
onChange={handleChange}
>
<option value="">Sort By</option>
<option value="latest">Latest</option>
<option value="name-asc">Name: A–Z</option>
<option value="name-desc">Name: Z–A</option>
</select>
</div>
<>
<FilterButton
// onClick={() => setShowFilter(true)}
/>
{/* {showFilter && (
<div className="filter-panel">
Filter Content Here
<button
onClick={() => setShowFilter(false)}
>
Close</button>
</div>
)} */}
</>
<select
className="sortby-select"
value={sort}
onChange={handleChange}
>
<option value="">Sort By</option>
<option value="name-asc">Name: A–Z</option>
<option value="name-desc">Name: Z–A</option>
</select>
</Col>
</Row>
{/* Sub-category cards */}
<Row>
{subCategories.map((sub) => (
{sortedProducts.map((sub) => (
<Col md={6} key={sub.subCategorySlug}>
<div className="collections-item">
<Link
......
components/Collection/InnerDetailsSubCategory.js
......@@ -3,11 +3,12 @@ import Link from "next/link";
import React, { useState } from "react";
import { Col, Row } from "react-bootstrap";
import { useRouter } from "next/router";
import FilterButton from "../Common/FilterButton";
const InnerDetailsSubCategory = ({ products }) => {
const router = useRouter();
const { category, subCategory } = router.query;
const [showFilter, setShowFilter] = useState(false);
const [sort, setSort] = useState("");
if (!products || !category || !subCategory) return null;
......@@ -28,7 +29,7 @@ const InnerDetailsSubCategory = ({ products }) => {
<div className="custom_container">
{/* Header */}
<Row>
<Row className="align-content-center">
<Col xs={6}>
<h3>
{subCategory
......@@ -39,6 +40,22 @@ const InnerDetailsSubCategory = ({ products }) => {
</Col>
<Col xs={6} className="d-flex justify-content-end">
<>
<FilterButton
// onClick={() => setShowFilter(true)}
/>
{/* {showFilter && (
<div className="filter-panel">
Filter Content Here
<button
onClick={() => setShowFilter(false)}
>
Close</button>
</div>
)} */}
</>
<select
className="sortby-select"
value={sort}
......
components/Common/FilterButton.js 0 → 100644
const FilterButton = ({ onClick }) => {
return (
<button className="filter-btn" onClick={onClick}>
<span className="filter-text">Filter</span>
{/* <span className="filter-divider" /> */}
<span className="filter-icon">
<svg
width="22"
height="22"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="4" y1="21" x2="4" y2="14" />
<line x1="4" y1="10" x2="4" y2="3" />
<line x1="12" y1="21" x2="12" y2="12" />
<line x1="12" y1="8" x2="12" y2="3" />
<line x1="20" y1="21" x2="20" y2="16" />
<line x1="20" y1="12" x2="20" y2="3" />
<line x1="1" y1="14" x2="7" y2="14" />
<line x1="9" y1="8" x2="15" y2="8" />
<line x1="17" y1="16" x2="23" y2="16" />
</svg>
</span>
</button>
);
};
export default FilterButton;
components/services/imageHandling.js
export const cleanImage = (originalImage) => {
let imageUrl = "/images/default.svg";
let imageUrl = "/image/default.svg";
if (originalImage) {
// /** When the AWS S3 plugin is activated, images are uploaded to S3 rather than local file system. */
// if (originalImage.url.startsWith("http")) {
......
public/image/default.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<svg width="752pt" height="752pt" version="1.1" viewBox="0 0 752 752" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m267.97 589.11c3.0977 0 6.2305-0.26953 9.3828-0.82422l245.5-43.289c26.055-4.6133 44.391-27.234 44.391-52.836 0-3.0977-0.26953-6.2383-0.82422-9.3828l-29.547-167.56c-4.6094-26.055-27.234-44.391-52.836-44.391-3.0977 0-6.2383 0.26953-9.3828 0.82422l-47.48 8.3711-60.965-73.074c1.1758-3.4102 1.8242-7.0312 1.8242-10.77 0-1.918-0.16406-3.8594-0.51172-5.8047-2.8555-16.137-16.855-27.488-32.715-27.488-1.918 0-3.8594 0.16406-5.8047 0.51172-16.137 2.8594-27.48 16.855-27.48 32.719 0 1.918 0.16406 3.8594 0.51172 5.8047 0.86328 4.8477 2.7422 9.2578 5.3594 13.066l-33.188 92.016-45.043 7.9414c-26.055 4.6094-44.391 27.234-44.391 52.836 0 3.0977 0.26953 6.2383 0.82422 9.3828l29.547 167.56c4.6016 26.051 27.227 44.383 52.828 44.383zm63.418-412.17c1.1562-0.20312 2.2969-0.30469 3.418-0.30469 9.2617 0 17.527 6.6602 19.18 16.125 0.20312 1.1562 0.29688 2.293 0.29688 3.418 0 9.2578-6.6602 17.527-16.125 19.18-1.1523 0.20312-2.293 0.29688-3.418 0.29688-9.2617 0-17.527-6.6641-19.18-16.125-0.20312-1.1562-0.29688-2.2969-0.29688-3.418 0-9.2539 6.6602-17.52 16.125-19.172zm-13.02 48.125c4.8906 2.7812 10.504 4.3438 16.375 4.3438 1.9141 0 3.8594-0.16406 5.8047-0.50781 7.1602-1.2695 13.371-4.7422 18.07-9.5859l52.945 63.465-121.76 21.469zm-119.86 142.71c0-19 13.645-35.895 33.027-39.297l47.93-8.4531c0.64453-0.019531 1.2734-0.13672 1.8789-0.33203l143.45-25.293c0.63281-0.023438 1.2656-0.12891 1.8789-0.33203l50.371-8.8789c2.3594-0.41797 4.6914-0.61719 6.9961-0.61719 19 0 35.895 13.641 39.297 33.027l29.547 167.56c0.41797 2.3555 0.61719 4.6914 0.61719 6.9961 0 19-13.645 35.895-33.027 39.297l-245.5 43.289c-2.3555 0.41797-4.6914 0.61719-6.9961 0.61719-19 0-35.895-13.645-39.297-33.027l-29.547-167.56c-0.42578-2.3555-0.625-4.6914-0.625-6.9961z"/>
<path d="m304.12 441.68c5.8359 35.73 36.703 61.125 71.801 61.125 3.8945 0 7.832-0.3125 11.789-0.95703h0.003906c35.738-5.8359 61.129-36.707 61.129-71.801 0-3.8945-0.3125-7.832-0.95703-11.789-5.8359-35.738-36.703-61.129-71.801-61.129-3.8945 0-7.832 0.3125-11.793 0.95703-35.73 5.8359-61.125 36.703-61.125 71.801-0.003907 3.8906 0.30859 7.832 0.95312 11.793zm81.379 46.598c-3.2266 0.52734-6.4258 0.77734-9.582 0.77734-28.418 0-53.523-20.602-58.227-49.59-0.52734-3.2266-0.77734-6.4258-0.77734-9.582 0-10.23 2.7031-20.012 7.4727-28.586l95.168 68.504c-8.6562 9.4844-20.406 16.262-34.055 18.477zm-19-116.62c3.2266-0.52734 6.4219-0.78125 9.582-0.78125 28.418 0 53.523 20.605 58.227 49.594 0.52734 3.2266 0.77734 6.4219 0.77734 9.5742 0 10.238-2.707 20.031-7.4883 28.609l-95.164-68.504c8.6562-9.4883 20.41-16.273 34.066-18.492z"/>
</g>
</svg>
styles/globals.css
......@@ -370,6 +370,7 @@ input:focus-visible {
outline: none;
color: #000;
width: auto;
padding: 0;
}
.collections-item {
margin-bottom: 2rem;
......@@ -590,6 +591,34 @@ input:focus-visible {
.homeBannerSwiper{
margin-top: 3.7rem;
}
.filter-btn {
display: inline-flex;
align-items: center;
border: 0;
background: #fff;
padding: 10px 14px;
cursor: pointer;
gap: 12px;
}
.filter-text {
/* font-size: 28px;
font-weight: 500;
color: #0a2540; */
}
.filter-divider {
width: 1px;
height: 32px;
background-color: #dcdcdc;
}
.filter-icon {
display: flex;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 1023px) {
}
/* ===== Mobile ===== */
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!