I created a cool agent vs human widegt that calculates time and cost comparisons. It works great a replit website im not going to use. I decided to go with WordPress but want the widget for the site. The replit that it is in gave me the following instructuction to pull out into its own app. Below is the instructions. I only got as far as creating the new replit.
Task Time & Cost Comparison Widget: Standalone Component Outline
I can create a standalone version of the task time and cost comparison widget that can be easily imported into a new Replit project. Here’s the detailed outline:
Component Structure
task-cost-calculator/index.tsx
+271
-0
Create standalone Task Cost Calculator component
task-cost-calculator/package.json
+36
-0
Create package.json for standalone Task Cost Calculator
task-cost-calculator/README.md
+80
-0
Create README for Task Cost Calculator
task-cost-calculator/demo.tsx
+27
-0
Create demo file for Task Cost Calculator
task-cost-calculator/index.css
+60
-0
Create stylesheet for Task Cost Calculator
task-cost-calculator/tailwind.config.js
+77
-0
Create Tailwind config for Task Cost Calculator
task-cost-calculator/vite.config.ts
+28
-0
Create Vite config for Task Cost Calculator
task-cost-calculator/ui/button.tsx
+56
-0
Create Button component for UI library
task-cost-calculator/ui/card.tsx
+79
-0
Create Card component for UI library
task-cost-calculator/ui/input.tsx
+25
-0
Create Input component for UI library
task-cost-calculator/ui/label.tsx
+24
-0
Create Label component for UI library
task-cost-calculator/ui/slider.tsx
+26
-0
Create Slider component for UI library
task-cost-calculator/ui/tabs.tsx
+53
-0
Create Tabs component for UI library
task-cost-calculator/lib/utils.ts
+6
-0
Create utilities for UI components
task-cost-calculator/index.html
+12
-0
Create HTML template for demo app
Instructions to Set Up in a New Replit
- Create a new Replit with the Node.js template
- Copy all the files from the
task-cost-calculatordirectory into your Replit - Run the following commands to install dependencies:
npm install
Run
- Update the Replit run command to start the demo:
Set
Run Demo
to
npm run dev
Apply
Key Features
- Interactive Task Sliders: Users can adjust the number of tasks they perform monthly
- Real-time Calculations: Automatic recalculation of costs and time based on user inputs
- Monthly/Yearly Toggle: View data in monthly or yearly perspectives
- Cost & Time Savings: Clear visualization of potential AI savings
- Fully Customizable: Change hourly rates, task configurations, and styling
- Responsive Design: Works well on all device sizes
- Standalone Component: Can be easily imported into any React project
Apply all
Preview code changes