98 lines
3.2 KiB
JavaScript
98 lines
3.2 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { ChevronRight } from 'lucide-react';
|
|
|
|
const rudrakshaData = {
|
|
title: "Rudraksha",
|
|
subtitle: "Explore the World's largest collection of Authentic A+ Grade Gupta Rudraksha.",
|
|
buttonText: "View All Collection",
|
|
columns: [
|
|
[
|
|
{ name: "Nirakar (0) Mukhi" },
|
|
{ name: "1 Mukhi" },
|
|
{ name: "2 Mukhi" },
|
|
{ name: "3 Mukhi" },
|
|
{ name: "4 Mukhi" },
|
|
{ name: "5 Mukhi" },
|
|
{ name: "6 Mukhi" }
|
|
],
|
|
[
|
|
{ name: "7 Mukhi" },
|
|
{ name: "8 Mukhi" },
|
|
{ name: "9 Mukhi" },
|
|
{ name: "10 Mukhi" },
|
|
{ name: "11 Mukhi" },
|
|
{ name: "12 Mukhi" },
|
|
{ name: "13 Mukhi" }
|
|
],
|
|
[
|
|
{ name: "14 Mukhi" },
|
|
{ name: "15 Mukhi" },
|
|
{ name: "16 Mukhi" },
|
|
{ name: "17 Mukhi" },
|
|
{ name: "18 Mukhi" },
|
|
{ name: "19 Mukhi" },
|
|
{ name: "20 Mukhi" }
|
|
],
|
|
[
|
|
{ name: "21 Mukhi" },
|
|
{ name: "22 Mukhi" },
|
|
{ name: "23 Mukhi" },
|
|
{ name: "24 Mukhi" },
|
|
{ name: "25 Mukhi" },
|
|
{ name: "26 Mukhi" }
|
|
],
|
|
[
|
|
{ name: "Trijuti Rudraksha" },
|
|
{ name: "Gauri Shankar Rudraksha" },
|
|
{ name: "Ganesh Rudraksha" },
|
|
{ name: "Garbha Gauri Rurdaksha" }
|
|
]
|
|
]
|
|
};
|
|
|
|
const HoverRudrakshaContent = () => {
|
|
const [selectedMukhi, setSelectedMukhi] = useState(null);
|
|
|
|
return (
|
|
<div className="bg-gradient-to-r from-orange-100 to-red-100 max-h-[50vh] min-w-[100vw] overflow-y-auto p-8">
|
|
<div className=" mx-auto bg-white rounded-xl shadow-2xl overflow-hidden">
|
|
<div className="md:flex">
|
|
<div className=" bg-orange-600 text-white p-8">
|
|
<h2 className="text-4xl font-bold mb-4">{rudrakshaData.title}</h2>
|
|
<p className="mb-8 text-lg">{rudrakshaData.subtitle}</p>
|
|
<button className="bg-white text-orange-600 px-6 py-3 rounded-full font-semibold hover:bg-orange-100 transition duration-300">
|
|
{rudrakshaData.buttonText}
|
|
</button>
|
|
</div>
|
|
<div className=" p-8">
|
|
<div className="grid md:grid-cols-5 gap-6">
|
|
{rudrakshaData.columns.map((column, columnIndex) => (
|
|
<div key={columnIndex}>
|
|
{column.map((item, itemIndex) => (
|
|
<div
|
|
key={itemIndex}
|
|
className="mb-2 cursor-pointer group"
|
|
onClick={() => setSelectedMukhi(item.name)}
|
|
>
|
|
<div className="flex items-center space-x-2 p-2 rounded-lg hover:bg-orange-100 transition duration-300">
|
|
<ChevronRight className="text-orange-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300" size={16} />
|
|
<span className="text-sm font-medium text-gray-700 group-hover:text-orange-600">{item.name}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{selectedMukhi && (
|
|
<div className="p-4 bg-orange-100 text-center">
|
|
<p className="text-lg font-semibold text-orange-800">Selected: {selectedMukhi}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HoverRudrakshaContent; |