├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .github └── workflows │ ├── ci.yml │ └── static.yml ├── .gitignore ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── .vscode ├── extensions.json └── settings.json ├── README.md ├── apps └── core │ ├── .eslintrc.json │ ├── index.html │ ├── postcss.config.js │ ├── project.json │ ├── public │ └── logo.svg │ ├── src │ ├── assets │ │ └── .gitkeep │ ├── components │ │ ├── RangeenLogo.tsx │ │ ├── color-picker │ │ │ └── color-picker.tsx │ │ ├── home │ │ │ ├── cards │ │ │ │ ├── activity-goal.tsx │ │ │ │ ├── calendar.tsx │ │ │ │ ├── chat.tsx │ │ │ │ ├── cookie-settings.tsx │ │ │ │ ├── create-account.tsx │ │ │ │ ├── data-table.tsx │ │ │ │ ├── index.tsx │ │ │ │ ├── metric.tsx │ │ │ │ ├── payment-method.tsx │ │ │ │ ├── report-issue.tsx │ │ │ │ ├── share.tsx │ │ │ │ ├── stats.tsx │ │ │ │ └── team-members.tsx │ │ │ ├── connect.tsx │ │ │ ├── footer.tsx │ │ │ ├── hero-header.tsx │ │ │ ├── home-page.tsx │ │ │ └── index.ts │ │ ├── navigation │ │ │ └── navigation.tsx │ │ └── toolbar │ │ │ ├── code.tsx │ │ │ └── toolbar.tsx │ ├── core │ │ ├── app.tsx │ │ ├── core-layout.tsx │ │ ├── core-routes.tsx │ │ └── theme │ │ │ ├── context.ts │ │ │ ├── theme-provider.tsx │ │ │ ├── types.ts │ │ │ └── utils.ts │ ├── icons │ │ ├── apple-icon.tsx │ │ └── paypal-icon.tsx │ ├── illustrations │ │ ├── festivities.tsx │ │ └── newspaper.tsx │ ├── main.tsx │ └── styles.css │ ├── tailwind.config.js │ ├── tsconfig.app.json │ ├── tsconfig.json │ └── vite.config.ts ├── components.json ├── libs ├── shadcn-ui │ ├── .babelrc │ ├── .eslintrc.json │ ├── README.md │ ├── project.json │ ├── src │ │ ├── index.ts │ │ └── ui │ │ │ ├── accordion.tsx │ │ │ ├── alert-dialog.tsx │ │ │ ├── alert.tsx │ │ │ ├── aspect-ratio.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── button.tsx │ │ │ ├── calendar.tsx │ │ │ ├── card.tsx │ │ │ ├── checkbox.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── command.tsx │ │ │ ├── context-menu.tsx │ │ │ ├── dialog.tsx │ │ │ ├── dropdown-menu.tsx │ │ │ ├── form.tsx │ │ │ ├── hover-card.tsx │ │ │ ├── input.tsx │ │ │ ├── label.tsx │ │ │ ├── menubar.tsx │ │ │ ├── navigation-menu.tsx │ │ │ ├── pagination.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress.tsx │ │ │ ├── radio-group.tsx │ │ │ ├── scroll-area.tsx │ │ │ ├── select.tsx │ │ │ ├── separator.tsx │ │ │ ├── sheet.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── switch.tsx │ │ │ ├── table.tsx │ │ │ ├── tabs.tsx │ │ │ ├── textarea.tsx │ │ │ ├── toast.tsx │ │ │ ├── toaster.tsx │ │ │ ├── toggle-group.tsx │ │ │ ├── toggle.tsx │ │ │ ├── tooltip.tsx │ │ │ ├── typography.tsx │ │ │ └── use-toast.ts │ ├── tsconfig.json │ └── tsconfig.lib.json └── shadcn-utils │ ├── .babelrc │ ├── .eslintrc.json │ ├── README.md │ ├── project.json │ ├── src │ ├── cn.ts │ └── index.ts │ ├── tsconfig.json │ └── tsconfig.lib.json ├── nx.json ├── package.json ├── pnpm-lock.yaml ├── tsconfig.base.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "ignorePatterns": ["**/*"], 4 | "plugins": ["@nx"], 5 | "overrides": [ 6 | { 7 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 8 | "rules": { 9 | "@nx/enforce-module-boundaries": [ 10 | "error", 11 | { 12 | "enforceBuildableLibDependency": true, 13 | "allow": [], 14 | "depConstraints": [ 15 | { 16 | "sourceTag": "*", 17 | "onlyDependOnLibsWithTags": ["*"] 18 | } 19 | ] 20 | } 21 | ] 22 | } 23 | }, 24 | { 25 | "files": ["*.ts", "*.tsx"], 26 | "extends": ["plugin:@nx/typescript"], 27 | "rules": {} 28 | }, 29 | { 30 | "files": ["*.js", "*.jsx"], 31 | "extends": ["plugin:@nx/javascript"], 32 | "rules": {} 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | 9 | permissions: 10 | actions: read 11 | contents: read 12 | 13 | jobs: 14 | main: 15 | runs-on: ubuntu-latest 16 | steps: 17 | - uses: actions/checkout@v4 18 | with: 19 | fetch-depth: 0 20 | 21 | # Connect your workspace on nx.app and uncomment this to enable task distribution. 22 | # The "--stop-agents-after" is optional, but allows idle agents to shut down once the "build" targets have been requested 23 | # - run: pnpm exec nx-cloud start-ci-run --distribute-on="5 linux-medium-js" --stop-agents-after="build" 24 | 25 | - uses: pnpm/action-setup@v2 26 | with: 27 | version: 8 28 | # Cache node_modules 29 | - uses: actions/setup-node@v3 30 | with: 31 | node-version: 20 32 | cache: 'pnpm' 33 | - run: pnpm install --frozen-lockfile 34 | - uses: nrwl/nx-set-shas@v4 35 | - run: pnpm exec nx affected -t lint test build 36 | -------------------------------------------------------------------------------- /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ['main'] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: 'pages' 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Single deploy job since we're just deploying 26 | deploy: 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | - uses: pnpm/action-setup@v2 35 | with: 36 | version: 8 37 | # Cache node_modules 38 | - uses: actions/setup-node@v3 39 | with: 40 | node-version: 20 41 | cache: 'pnpm' 42 | - run: pnpm install --frozen-lockfile 43 | - name: Build core 44 | run: | 45 | pnpm exec nx run core:build --base=https://navnote.github.io/rangeen/ 46 | - name: Setup Pages 47 | uses: actions/configure-pages@v4 48 | - name: Upload artifact 49 | uses: actions/upload-pages-artifact@v3 50 | with: 51 | path: 'dist/apps/core' 52 | - name: Deploy to GitHub Pages 53 | id: deployment 54 | uses: actions/deploy-pages@v4 55 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | dist 5 | tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | 41 | .nx/cache -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | strict-peer-dependencies=false 2 | auto-install-peers=true 3 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v20.11.1 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Add files here to ignore them from prettier formatting 2 | /dist 3 | /coverage 4 | /.nx/cache -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "plugins": [ 4 | "prettier-plugin-organize-imports", 5 | "prettier-plugin-tailwindcss" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["nrwl.angular-console", "esbenp.prettier-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cSpell.words": ["rangeen", "shadcn", "tailwindcss"] 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rangeen 2 | 3 | Rangeen is a quick weekend/open-source project that lets you visualize colours with real websites and components. It is a tool that helps you to create a colour palette for your website. 4 | The project uses material design utilities to generate the colour palette and then uses the colours to generate a theme for the website. 5 | 6 | ![Screenshot 2024-03-09 at 10 40 34 PM](https://github.com/Navnote/rangeen/assets/6350299/50f7ca04-6861-4a66-80d2-5f4bf278a995) 7 | 8 | ## Visualise Shadcn Components 9 | 10 | ![image](https://github.com/Navnote/rangeen/assets/6350299/005d6e92-892f-418d-9fe0-1156add072d1) 11 | -------------------------------------------------------------------------------- /apps/core/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["plugin:@nx/react", "../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /apps/core/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rangeen - Color Picker 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /apps/core/postcss.config.js: -------------------------------------------------------------------------------- 1 | const { join } = require('path'); 2 | 3 | // Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build 4 | // option from your application's configuration (i.e. project.json). 5 | // 6 | // See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries 7 | 8 | module.exports = { 9 | plugins: { 10 | tailwindcss: { 11 | config: join(__dirname, 'tailwind.config.js'), 12 | }, 13 | autoprefixer: {}, 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /apps/core/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "core", 3 | "$schema": "../../node_modules/nx/schemas/project-schema.json", 4 | "sourceRoot": "apps/core/src", 5 | "projectType": "application", 6 | "targets": {}, 7 | "tags": [] 8 | } 9 | -------------------------------------------------------------------------------- /apps/core/public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /apps/core/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/navnote/rangeen/7e89bf016f471512fc90a128395cab55730babdf/apps/core/src/assets/.gitkeep -------------------------------------------------------------------------------- /apps/core/src/components/RangeenLogo.tsx: -------------------------------------------------------------------------------- 1 | export const RangeenLogo = (props: React.SVGProps) => { 2 | return ( 3 | 4 | 8 | 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /apps/core/src/components/color-picker/color-picker.tsx: -------------------------------------------------------------------------------- 1 | type ColorPickerProps = { 2 | label: string; 3 | color: string; 4 | setColor: (color: string) => void; 5 | }; 6 | 7 | export const ColorPicker = ({ label, color, setColor }: ColorPickerProps) => { 8 | return ( 9 |
10 | setColor(value)} 14 | className="h-10 w-10 cursor-pointer rounded-md bg-transparent p-0 focus:outline-none focus:ring-0" 15 | /> 16 |
17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /apps/core/src/components/home/cards/activity-goal.tsx: -------------------------------------------------------------------------------- 1 | import { Minus, Plus } from 'lucide-react'; 2 | import * as React from 'react'; 3 | import { Bar, BarChart, ResponsiveContainer } from 'recharts'; 4 | 5 | import { 6 | Button, 7 | Card, 8 | CardContent, 9 | CardDescription, 10 | CardFooter, 11 | CardHeader, 12 | CardTitle, 13 | } from '@rangeen/shadcn-ui'; 14 | 15 | const data = [ 16 | { 17 | goal: 400, 18 | }, 19 | { 20 | goal: 300, 21 | }, 22 | { 23 | goal: 200, 24 | }, 25 | { 26 | goal: 300, 27 | }, 28 | { 29 | goal: 200, 30 | }, 31 | { 32 | goal: 278, 33 | }, 34 | { 35 | goal: 189, 36 | }, 37 | { 38 | goal: 239, 39 | }, 40 | { 41 | goal: 300, 42 | }, 43 | { 44 | goal: 200, 45 | }, 46 | { 47 | goal: 278, 48 | }, 49 | { 50 | goal: 189, 51 | }, 52 | { 53 | goal: 349, 54 | }, 55 | ]; 56 | 57 | export function CardsActivityGoal() { 58 | const [goal, setGoal] = React.useState(350); 59 | 60 | function onClick(adjustment: number) { 61 | setGoal(Math.max(200, Math.min(400, goal + adjustment))); 62 | } 63 | 64 | return ( 65 | 66 | 67 | Move Goal 68 | Set your daily activity goal. 69 | 70 | 71 |
72 | 82 |
83 |
{goal}
84 |
85 | Calories/day 86 |
87 |
88 | 98 |
99 |
100 | 101 | 102 | 110 | 111 | 112 |
113 |
114 | 115 | 116 | 117 |
118 | ); 119 | } 120 | -------------------------------------------------------------------------------- /apps/core/src/components/home/cards/calendar.tsx: -------------------------------------------------------------------------------- 1 | import { addDays } from 'date-fns'; 2 | 3 | import { Calendar, Card, CardContent } from '@rangeen/shadcn-ui'; 4 | 5 | const start = new Date(2023, 5, 5); 6 | 7 | export function CardsCalendar() { 8 | return ( 9 | 10 | 11 | 20 | 21 | 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /apps/core/src/components/home/cards/chat.tsx: -------------------------------------------------------------------------------- 1 | import { Check, Plus, Send } from 'lucide-react'; 2 | import * as React from 'react'; 3 | 4 | import { 5 | Avatar, 6 | AvatarFallback, 7 | AvatarImage, 8 | Button, 9 | Card, 10 | CardContent, 11 | CardFooter, 12 | CardHeader, 13 | Command, 14 | CommandEmpty, 15 | CommandGroup, 16 | CommandInput, 17 | CommandItem, 18 | CommandList, 19 | Dialog, 20 | DialogContent, 21 | DialogDescription, 22 | DialogFooter, 23 | DialogHeader, 24 | DialogTitle, 25 | Input, 26 | Tooltip, 27 | TooltipContent, 28 | TooltipProvider, 29 | TooltipTrigger, 30 | } from '@rangeen/shadcn-ui'; 31 | import { cn } from '@rangeen/shadcn-utils'; 32 | 33 | const users = [ 34 | { 35 | name: 'Olivia Martin', 36 | email: 'm@example.com', 37 | avatar: '/avatars/01.png', 38 | }, 39 | { 40 | name: 'Isabella Nguyen', 41 | email: 'isabella.nguyen@email.com', 42 | avatar: '/avatars/03.png', 43 | }, 44 | { 45 | name: 'Emma Wilson', 46 | email: 'emma@example.com', 47 | avatar: '/avatars/05.png', 48 | }, 49 | { 50 | name: 'Jackson Lee', 51 | email: 'lee@example.com', 52 | avatar: '/avatars/02.png', 53 | }, 54 | { 55 | name: 'William Kim', 56 | email: 'will@email.com', 57 | avatar: '/avatars/04.png', 58 | }, 59 | ] as const; 60 | 61 | type User = (typeof users)[number]; 62 | 63 | export function CardsChat() { 64 | const [open, setOpen] = React.useState(false); 65 | const [selectedUsers, setSelectedUsers] = React.useState([]); 66 | 67 | const [messages, setMessages] = React.useState([ 68 | { 69 | role: 'agent', 70 | content: 'Hi, how can I help you today?', 71 | }, 72 | { 73 | role: 'user', 74 | content: "Hey, I'm having trouble with my account.", 75 | }, 76 | { 77 | role: 'agent', 78 | content: 'What seems to be the problem?', 79 | }, 80 | { 81 | role: 'user', 82 | content: "I can't log in.", 83 | }, 84 | ]); 85 | const [input, setInput] = React.useState(''); 86 | const inputLength = input.trim().length; 87 | 88 | return ( 89 | <> 90 | 91 | 92 |
93 | 94 | 95 | OM 96 | 97 |
98 |

Sofia Davis

99 |

m@example.com

100 |
101 |
102 | 103 | 104 | 105 | 114 | 115 | New message 116 | 117 | 118 |
119 | 120 |
121 | {messages.map((message, index) => ( 122 |
131 | {message.content} 132 |
133 | ))} 134 |
135 |
136 | 137 |
{ 139 | event.preventDefault(); 140 | if (inputLength === 0) return; 141 | setMessages([ 142 | ...messages, 143 | { 144 | role: 'user', 145 | content: input, 146 | }, 147 | ]); 148 | setInput(''); 149 | }} 150 | className="flex w-full items-center space-x-2" 151 | > 152 | setInput(event.target.value)} 159 | /> 160 | 164 |
165 |
166 |
167 | 168 | 169 | 170 | New message 171 | 172 | Invite a user to this thread. This will create a new group 173 | message. 174 | 175 | 176 | 177 | 178 | 179 | No users found. 180 | 181 | {users.map((user) => ( 182 | { 186 | if (selectedUsers.includes(user)) { 187 | return setSelectedUsers( 188 | selectedUsers.filter( 189 | (selectedUser) => selectedUser !== user, 190 | ), 191 | ); 192 | } 193 | 194 | return setSelectedUsers( 195 | [...users].filter((u) => 196 | [...selectedUsers, user].includes(u), 197 | ), 198 | ); 199 | }} 200 | > 201 | 202 | 203 | {user.name[0]} 204 | 205 |
206 |

207 | {user.name} 208 |

209 |

210 | {user.email} 211 |

212 |
213 | {selectedUsers.includes(user) ? ( 214 | 215 | ) : null} 216 |
217 | ))} 218 |
219 |
220 |
221 | 222 | {selectedUsers.length > 0 ? ( 223 |
224 | {selectedUsers.map((user) => ( 225 | 229 | 230 | {user.name[0]} 231 | 232 | ))} 233 |
234 | ) : ( 235 |

236 | Select users to add to this thread. 237 |

238 | )} 239 | 247 |
248 |
249 |
250 | 251 | ); 252 | } 253 | -------------------------------------------------------------------------------- /apps/core/src/components/home/cards/cookie-settings.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Button, 3 | Card, 4 | CardContent, 5 | CardDescription, 6 | CardFooter, 7 | CardHeader, 8 | CardTitle, 9 | Label, 10 | Switch, 11 | } from '@rangeen/shadcn-ui'; 12 | 13 | export function CardsCookieSettings() { 14 | return ( 15 | 16 | 17 | Cookie Settings 18 | Manage your cookie settings here. 19 | 20 | 21 |
22 | 29 | 30 |
31 |
32 | 39 | 40 |
41 |
42 | 48 | 49 |
50 |
51 | 52 | 55 | 56 |
57 | ); 58 | } 59 | -------------------------------------------------------------------------------- /apps/core/src/components/home/cards/create-account.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Button, 3 | Card, 4 | CardContent, 5 | CardDescription, 6 | CardFooter, 7 | CardHeader, 8 | CardTitle, 9 | Input, 10 | Label, 11 | } from '@rangeen/shadcn-ui'; 12 | import { Chrome, Github } from 'lucide-react'; 13 | 14 | export function CardsCreateAccount() { 15 | return ( 16 | 17 | 18 | Create an account 19 | 20 | Enter your email below to create your account 21 | 22 | 23 | 24 |
25 | 29 | 33 |
34 |
35 |
36 | 37 |
38 |
39 | 40 | Or continue with 41 | 42 |
43 |
44 |
45 | 46 | 47 |
48 |
49 | 50 | 51 |
52 |
53 | 54 | 55 | 56 |
57 | ); 58 | } 59 | -------------------------------------------------------------------------------- /apps/core/src/components/home/cards/index.tsx: -------------------------------------------------------------------------------- 1 | import { CardsActivityGoal } from './activity-goal'; 2 | import { CardsCalendar } from './calendar'; 3 | import { CardsChat } from './chat'; 4 | import { CardsCookieSettings } from './cookie-settings'; 5 | import { CardsCreateAccount } from './create-account'; 6 | import { CardsDataTable } from './data-table'; 7 | import { CardsMetric } from './metric'; 8 | import { CardsPaymentMethod } from './payment-method'; 9 | import { CardsReportIssue } from './report-issue'; 10 | import { CardsShare } from './share'; 11 | import { CardsStats } from './stats'; 12 | import { CardsTeamMembers } from './team-members'; 13 | 14 | export default function CardsDemo() { 15 | return ( 16 |
17 |
18 | 19 |
20 | 21 |
22 | 23 |
24 |
25 | 26 |
27 |
28 |
29 |
30 | 31 | 32 | 33 |
34 |
35 | 36 | 37 |
38 | 39 |
40 |
41 |
42 |
43 |
44 |
45 | 46 |
47 | 48 |
49 |
50 | 51 |
52 |
53 |
54 | 55 |
56 | 57 |
58 | 59 |
60 |
61 |
62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /apps/core/src/components/home/cards/metric.tsx: -------------------------------------------------------------------------------- 1 | import { Line, LineChart, ResponsiveContainer, Tooltip } from 'recharts'; 2 | 3 | import { 4 | Card, 5 | CardContent, 6 | CardDescription, 7 | CardHeader, 8 | CardTitle, 9 | } from '@rangeen/shadcn-ui'; 10 | 11 | const data = [ 12 | { 13 | average: 400, 14 | today: 240, 15 | }, 16 | { 17 | average: 300, 18 | today: 139, 19 | }, 20 | { 21 | average: 200, 22 | today: 980, 23 | }, 24 | { 25 | average: 278, 26 | today: 390, 27 | }, 28 | { 29 | average: 189, 30 | today: 480, 31 | }, 32 | { 33 | average: 239, 34 | today: 380, 35 | }, 36 | { 37 | average: 349, 38 | today: 430, 39 | }, 40 | ]; 41 | 42 | export function CardsMetric() { 43 | return ( 44 | 45 | 46 | Exercise Minutes 47 | 48 | Your exercise minutes are ahead of where you normally are. 49 | 50 | 51 | 52 |
53 | 54 | 63 | { 65 | if (active && payload && payload.length) { 66 | return ( 67 |
68 |
69 |
70 | 71 | Average 72 | 73 | 74 | {payload[0].value} 75 | 76 |
77 |
78 | 79 | Today 80 | 81 | 82 | {payload[1].value} 83 | 84 |
85 |
86 |
87 | ); 88 | } 89 | 90 | return null; 91 | }} 92 | /> 93 | 108 | 122 |
123 |
124 |
125 |
126 |
127 | ); 128 | } 129 | -------------------------------------------------------------------------------- /apps/core/src/components/home/cards/payment-method.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Button, 3 | Card, 4 | CardContent, 5 | CardDescription, 6 | CardFooter, 7 | CardHeader, 8 | CardTitle, 9 | Input, 10 | Label, 11 | RadioGroup, 12 | RadioGroupItem, 13 | Select, 14 | SelectContent, 15 | SelectItem, 16 | SelectTrigger, 17 | SelectValue, 18 | } from '@rangeen/shadcn-ui'; 19 | import { AppleIcon } from '../../../icons/apple-icon'; 20 | import { PaypalIcon } from '../../../icons/paypal-icon'; 21 | 22 | export function CardsPaymentMethod() { 23 | return ( 24 | 25 | 26 | Payment Method 27 | 28 | Add a new payment method to your account. 29 | 30 | 31 | 32 | 33 |
34 | 40 | 59 |
60 | 61 |
62 | 68 | 75 |
76 | 77 |
78 | 84 | 91 |
92 |
93 |
94 | 95 | 96 |
97 |
98 | 99 | 100 |
101 |
102 | 103 | 104 |
105 |
106 |
107 | 108 | 127 |
128 |
129 | 130 | 142 |
143 |
144 | 145 | 146 |
147 |
148 |
149 | 150 | 151 | 152 |
153 | ); 154 | } 155 | -------------------------------------------------------------------------------- /apps/core/src/components/home/cards/report-issue.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { 4 | Button, 5 | Card, 6 | CardContent, 7 | CardDescription, 8 | CardFooter, 9 | CardHeader, 10 | CardTitle, 11 | Input, 12 | Label, 13 | Select, 14 | SelectContent, 15 | SelectItem, 16 | SelectTrigger, 17 | SelectValue, 18 | Textarea, 19 | } from '@rangeen/shadcn-ui'; 20 | 21 | export function CardsReportIssue() { 22 | const id = React.useId(); 23 | 24 | return ( 25 | 26 | 27 | Report an issue 28 | 29 | What area are you having problems with? 30 | 31 | 32 | 33 |
34 |
35 | 36 | 48 |
49 |
50 | 51 | 66 |
67 |
68 |
69 | 70 | 71 |
72 |
73 | 74 |