add basic pricing calculator #250
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR adds a pricing calculator feature to the Tigris documentation site, enabling users to compare storage costs between Tigris and competitors. The main change converts the pricing page from Markdown (.md) to MDX (.mdx) format and integrates a new PricingCalculator React component that provides interactive sliders for storage amounts (100-5000 GB) and egress percentages (0-500%).
The implementation includes:
- A React component (
src/components/PricingCalculator.jsx) that calculates costs using hardcoded rates: Tigris at $0.02/GB storage with free egress, versus competitors at $0.023/GB storage plus $0.09/GB egress - Comprehensive CSS styling in
custom.csswith dark theme support, responsive design, and custom slider components - A standalone HTML version (
calculator-simple.html) that duplicates the functionality without React dependencies - Link updates across multiple documentation files to reflect the pricing page's new .mdx extension
The calculator emphasizes Tigris's competitive advantage by highlighting zero egress fees compared to traditional cloud providers. It displays visual bar charts showing cost breakdowns and potential monthly savings, making pricing comparisons more tangible for users evaluating storage options.
Confidence score: 3/5
- This PR introduces functional pricing calculator components but has several code quality issues that should be addressed before merging
- Score reflects concerns about hardcoded pricing values, unused imports, inconsistent free tier logic, and potential negative savings displays that could confuse users
- Pay close attention to
src/components/PricingCalculator.jsxfor logic corrections anddocs/pricing/calculator-simple.htmlfor inconsistent hardcoded values
7 files reviewed, 5 comments
| @@ -0,0 +1,185 @@ | |||
| import React, { useState, useEffect } from "react"; | |||
There was a problem hiding this comment.
style: useEffect is imported but never used in the component
| import React, { useState, useEffect } from "react"; | |
| import React, { useState } from "react"; |
| {Math.min(storage, 5) * 0.023 + Math.min(egress, 15) * 0.09 > | ||
| 0 && ( | ||
| <div | ||
| className="bar-section free-section" | ||
| style={{ | ||
| flexGrow: | ||
| Math.min(storage, 5) * 0.023 + | ||
| Math.min(egress, 15) * 0.09, |
There was a problem hiding this comment.
logic: The free tier logic is inconsistent - 'other providers' get charged for their free storage/egress but the cost is labeled as 'Free'. This makes the comparison misleading.
| const tigrisTotal = tigrisStorageCost; | ||
|
|
||
| // Other provider calculations | ||
| const otherPaidStorage = Math.max(0, storage - 5); |
There was a problem hiding this comment.
logic: Other providers also get 5GB free storage, but line 18 charges them for it. This should be Math.max(0, storage - 0) if they have no free tier, or the free section logic needs fixing.
| >$19.90</span | ||
| > | ||
| </div> | ||
| </div> | ||
| <div class="flex-shrink-0 w-32"> | ||
| <span class="text-sm font-medium text-gray-700">Tigris Data</span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Other Provider Line --> | ||
| <div class="flex items-center"> | ||
| <div | ||
| class="relative h-16 bg-gray-200 rounded-lg overflow-hidden flex-1 mr-4" | ||
| > | ||
| <div | ||
| id="otherContainer" | ||
| class="h-full flex rounded-lg overflow-hidden" | ||
| style="width: 100%" | ||
| > | ||
| <!-- Free Tier Section --> | ||
| <div | ||
| id="otherFree" | ||
| class="h-full bg-green-500 flex items-center justify-center transition-all duration-500 ease-out" | ||
| style="min-width: 60px" | ||
| > | ||
| <span class="text-white font-bold text-xs whitespace-nowrap" | ||
| >Free</span | ||
| > | ||
| </div> | ||
| <!-- Storage Section --> | ||
| <div | ||
| id="otherStorage" | ||
| class="h-full bg-blue-500 flex items-center justify-center transition-all duration-500 ease-out" | ||
| style="min-width: 60px" | ||
| > | ||
| <span class="text-white font-bold text-xs whitespace-nowrap" | ||
| >Storage</span | ||
| > | ||
| </div> | ||
| <!-- Egress Section --> | ||
| <div | ||
| id="otherEgressSection" | ||
| class="h-full bg-red-500 flex items-center justify-center transition-all duration-500 ease-out" | ||
| style="min-width: 60px" | ||
| > | ||
| <span class="text-white font-bold text-xs whitespace-nowrap" | ||
| >Egress</span | ||
| > | ||
| </div> | ||
| </div> | ||
| <!-- Total Cost --> | ||
| <div class="absolute top-0 right-0 h-full flex items-center pr-4"> | ||
| <span | ||
| id="otherCost" | ||
| class="text-white font-bold text-sm bg-black bg-opacity-60 px-2 py-1 rounded" | ||
| >$66.35</span |
There was a problem hiding this comment.
logic: Static placeholder costs ($19.90, $66.35) don't match the initial calculation and will confuse users before interaction
| otherContainer.style.width = `${otherBarWidth}%`; | ||
|
|
||
| // Calculate Tigris section widths | ||
| const tigrisFreeValue = tigrisFreeStorage * 0.02; |
There was a problem hiding this comment.
logic: Free tier calculation uses storage pricing rate (0.02) but should be 0 since it's free
| const tigrisFreeValue = tigrisFreeStorage * 0.02; | |
| const tigrisFreeValue = 0; // Free tier has no cost |
This is a starting point for the calculator and needs more help with styling