Percentage Tracker

Progress

Tracking completion towards your goal

+ {displayValue}% +

+ {label &&

{label}

} +

+ ) +} + +export default PercentageTracker diff --git a/percentage-tracker/src/PercentageTracker.webflow.tsx b/percentage-tracker/src/PercentageTracker.webflow.tsx new file mode 100644 index 0000000..1309ec4 --- /dev/null +++ b/percentage-tracker/src/PercentageTracker.webflow.tsx @@ -0,0 +1,30 @@ +import { declareComponent } from '@webflow/react' +import { props } from '@webflow/data-types' +import PercentageTracker from './PercentageTracker' +import './style.css' + +export default declareComponent(PercentageTracker, { + name: 'Percentage Tracker', + description: 'An animated progress tracker with customizable label, color, and delay.', + group: 'Feedback', + props: { + value: props.Number({ + name: 'Value', + min: 0, + max: 100, + defaultValue: 50, + }), + label: props.Text({ + name: 'Label', + }), + color: props.Text({ + name: 'Color', + defaultValue: '#16a34a', + }), + delay: props.Number({ + name: 'Delay (ms)', + min: 0, + defaultValue: 0, + }), + }, +}) diff --git a/percentage-tracker/src/main.tsx b/percentage-tracker/src/main.tsx new file mode 100644 index 0000000..954701e --- /dev/null +++ b/percentage-tracker/src/main.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import PercentageTracker from './PercentageTracker' +import './style.css' + +ReactDOM.createRoot(document.getElementById('app')!).render( + +

+ +

+ , +) diff --git a/percentage-tracker/src/style.css b/percentage-tracker/src/style.css new file mode 100644 index 0000000..4c1b0c2 --- /dev/null +++ b/percentage-tracker/src/style.css @@ -0,0 +1,2 @@ +@import "tailwindcss"; +@plugin "daisyui"; diff --git a/percentage-tracker/tsconfig.json b/percentage-tracker/tsconfig.json new file mode 100644 index 0000000..a4c834a --- /dev/null +++ b/percentage-tracker/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +} diff --git a/percentage-tracker/vite.config.js b/percentage-tracker/vite.config.js new file mode 100644 index 0000000..4ba4f56 --- /dev/null +++ b/percentage-tracker/vite.config.js @@ -0,0 +1,17 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import tailwindcss from '@tailwindcss/vite' + +export default defineConfig({ + plugins: [ + react({ + include: '**/*.{jsx,tsx}', + }), + tailwindcss(), + ], + esbuild: { + loader: 'tsx', + include: /src\/.*\.[tj]sx?$/, + exclude: [], + }, +}) diff --git a/percentage-tracker/webflow.json b/percentage-tracker/webflow.json new file mode 100644 index 0000000..46cf23b --- /dev/null +++ b/percentage-tracker/webflow.json @@ -0,0 +1,16 @@ +{ + "library": { + "name": "Webflow Code Import Examples - Percentage Tracker", + "components": [ + "**/*.webflow.@(js|jsx|mjs|ts|tsx)" + ], + "id": "webflow-code-import-examples---percentage-tracker" + }, + "telemetry": { + "global": { + "allowTelemetry": true, + "lastPrompted": 1757368712207, + "version": "1.8.40" + } + } +}