Skip to content

Commit

Permalink
color changes from PR review
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshbermanssw
joshbermanssw committed Nov 26, 2024
1 parent 3a758b3 commit dc674b8
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 87 deletions.
154 changes: 78 additions & 76 deletions components/blocks/Table/table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import { IoMdInformationCircleOutline } from 'react-icons/io';

const TableHeader = ({ data, scrollData }) => {
return (
<div className="grid grid-cols-[1fr,30px,repeat(5,minmax(150px,1fr))] pt-6 px-6 bg-[#EBF8FD]">
<div className="grid grid-cols-[1fr,30px,repeat(5,minmax(150px,1fr))] pt-6 px-6 bg-slate-50">
{/* Sticky Header Column */}
<div className="sticky top-0 left-0 z-10 bg-[#EBF8FD] pl-4 pb-2 text-gray-700 font-bold">
<div className="sticky top-0 left-0 z-10 bg-slate-50 pl-4 pb-2 text-gray-700 font-bold">
{data.tableHeader}
</div>
{/* Sticky void column */}
Expand All @@ -25,7 +25,7 @@ const TableHeader = ({ data, scrollData }) => {
{headerItem.columnHeader}
</Link>
</div>
<div className="text-center font-light text-slate-400">
<div className="text-center font-light text-xs text-slate-400">
{headerItem.columnByLine}
</div>
</div>
Expand Down Expand Up @@ -57,85 +57,87 @@ const TableBox = ({ data, index }) => {
};

return (
<div className="lg:mx-auto p-4 relative">
<div
className="overflow-x-scroll lg:overflow-x-hidden shadow-2xl rounded-2xl lg:shadow-none snap-x"
ref={scrollContainerRef}
onScroll={handleScroll}
>
<div className="min-w-[1200px] bg-[#EBF8FD] lg:bg-transparent p-6 rounded-3xl">
{/* Void column on the right */}
<div className="absolute top-4 bottom-4 right-4 w-[40px] bg-gradient-to-r from-transparent rounded-2xl via-[#EBF8FD]/30 to-[#EBF8FD] pointer-events-none lg:hidden"></div>
<div className="bg-slate-50">
<div className="lg:mx-auto relative max-w-screen-xl">
<div
className="overflow-x-scroll lg:overflow-x-hidden shadow-2xl rounded-2xl lg:shadow-none snap-x"
ref={scrollContainerRef}
onScroll={handleScroll}
>
<div className="min-w-[1200px] bg-[#EBF8FD] lg:bg-transparent p-6 rounded-3xl">
{/* Void column on the right */}
<div className="absolute top-4 bottom-4 right-4 w-[40px] bg-gradient-to-r from-transparent via-[#EBF8FD]/30 to-[#EBF8FD] rounded-2xl pointer-events-none lg:hidden"></div>

{/* Sticky Table Header */}
<div className=" bg-[#EBF8FD]">
<TableHeader data={data} scrollData={scrollData} />
</div>
{/* Table Rows */}
<div
className="border-t border-gray-300 lg:bg-transparent"
key={index}
>
{data.rowItems?.map((row, rowIndex) => (
<div
key={rowIndex}
className="grid grid-cols-[1fr,30px,repeat(5,minmax(150px,1fr))] h-[50px] border-b border-gray-300/50 px-6 hover:bg-cyan-400/5 bg-[#EBF8FD] snap-start"
>
<div className="flex bg-[#EBF8FD] items-center sticky left-0 snap-start ">
<div className="px-4 py-2 whitespace-nowrap font-medium flex items-center">
{row.rowHeader}
{row.rowDescription && (
<div
className="relative ml-1 flex items-center"
onMouseEnter={() => handleMouseEnter(rowIndex)}
onMouseLeave={handleMouseLeave}
>
<IoMdInformationCircleOutline className="text-orange-500 text-xl z-20" />
{infoIconHoverIndex === rowIndex && (
<div className="absolute top-1/2 left-full transform -translate-y-1/2 ml-2 text-sm p-2 rounded-lg shadow-lg w-[300px] break-words whitespace-normal text-center bg-white">
<div className="absolute top-1/2 left-0 transform -translate-y-1/2 -translate-x-full w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white"></div>
{row.rowDescription}
</div>
)}
</div>
{/* Sticky Table Header */}
<div className=" bg-slate-50 pb-4">
<TableHeader data={data} scrollData={scrollData} />
</div>
{/* Table Rows */}
<div
className="border-t border-gray-300 lg:bg-transparent"
key={index}
>
{data.rowItems?.map((row, rowIndex) => (
<div
key={rowIndex}
className="grid grid-cols-[1fr,30px,repeat(5,minmax(150px,1fr))] h-[50px] px-6 hover:bg-cyan-400/5 bg-slate-50 snap-start"
>
<div className="flex bg-slate-50 items-center sticky left-0 snap-start ">
<div className="px-4 py-2 whitespace-nowrap font-medium flex items-center">
{row.rowHeader}
{row.rowDescription && (
<div
className="relative ml-1 flex items-center"
onMouseEnter={() => handleMouseEnter(rowIndex)}
onMouseLeave={handleMouseLeave}
>
<IoMdInformationCircleOutline className="text-orange-500 text-xl z-20" />
{infoIconHoverIndex === rowIndex && (
<div className="absolute top-1/2 left-full transform -translate-y-1/2 ml-2 text-sm p-2 rounded-lg shadow-lg w-[300px] break-words whitespace-normal text-center bg-white">
<div className="absolute top-1/2 left-0 transform -translate-y-1/2 -translate-x-full w-0 h-0 border-t-8 border-t-transparent border-b-8 border-b-transparent border-r-8 border-r-white"></div>
{row.rowDescription}
</div>
)}
</div>
)}
</div>
</div>
{/* Sticky void column */}
<div className="sticky left-[175px] z-10">
{scrollData && scrollData.scrollLeft > 80 && (
<div className="w-[30px] h-full bg-gradient-to-r from-[#EBF8FD] via-[#EBF8FD]/30 to-transparent"></div>
)}
</div>
</div>
{/* Sticky void column */}
<div className="sticky left-[175px] z-10">
{scrollData && scrollData.scrollLeft > 80 && (
<div className="w-[30px] h-full bg-gradient-to-r from-[#EBF8FD] via-[#EBF8FD]/30 to-transparent"></div>
)}
</div>

{row.rowCells?.map((cell, cellIndex) => {
let cellData = {
columnHeader: '',
cellValue: '',
isTicked: false,
};
{row.rowCells?.map((cell, cellIndex) => {
let cellData = {
columnHeader: '',
cellValue: '',
isTicked: false,
};

try {
cellData = JSON.parse(cell);
} catch (error) {
console.error('Invalid cell data format:', error);
}
try {
cellData = JSON.parse(cell);
} catch (error) {
console.error('Invalid cell data format:', error);
}

return (
<div
key={cellIndex}
className="text-center flex items-center justify-center snap-start"
>
{cellData.isTicked ? (
<FiCheck />
) : (
cellData.cellValue || <FiMinus />
)}
</div>
);
})}
</div>
))}
return (
<div
key={cellIndex}
className="text-center flex items-center justify-center snap-start"
>
{cellData.isTicked ? (
<FiCheck />
) : (
cellData.cellValue || <FiMinus />
)}
</div>
);
})}
</div>
))}
</div>
</div>
</div>
</div>
Expand Down
11 changes: 0 additions & 11 deletions content/blocksPages/pricing.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,17 +348,6 @@
}
],
"rowItems": [
{
"rowHeader": "Cost/ mo.",
"rowDescription": "",
"rowCells": [
"{\"columnHeader\":\"Free\",\"cellValue\":\"\",\"isTicked\":true}",
"{\"columnHeader\":\"Team\",\"cellValue\":\"$29\",\"isTicked\":false}",
"{\"columnHeader\":\"Team Plus\",\"cellValue\":\"$49\",\"isTicked\":false}",
"{\"columnHeader\":\"Business\",\"cellValue\":\"$299\",\"isTicked\":false}",
"{\"columnHeader\":\"Enterprise\",\"cellValue\":\"custom\",\"isTicked\":false}"
]
},
{
"rowHeader": "Annual discount",
"rowDescription": "",
Expand Down

0 comments on commit dc674b8

Please sign in to comment.