dere-cbai commited on
Commit
6d65f0c
·
0 Parent(s):

Clean deployment with countdown functionality

Browse files
This view is limited to 50 files because it contains too many changes.   See raw diff
Files changed (50) hide show
  1. .dockerignore +8 -0
  2. .github/scripts/update_conferences.py +265 -0
  3. .github/workflows/update-conferences.yml +49 -0
  4. .gitignore +24 -0
  5. Dockerfile +26 -0
  6. LICENSE +21 -0
  7. README.md +143 -0
  8. components.json +20 -0
  9. eslint.config.js +29 -0
  10. index.html +18 -0
  11. nginx.conf +32 -0
  12. package-lock.json +0 -0
  13. package.json +85 -0
  14. postcss.config.js +6 -0
  15. public/favicon.ico +0 -0
  16. public/placeholder.svg +1 -0
  17. src/App.css +42 -0
  18. src/App.tsx +30 -0
  19. src/components/ConferenceCalendar.tsx +164 -0
  20. src/components/ConferenceCard.tsx +161 -0
  21. src/components/ConferenceDialog.tsx +368 -0
  22. src/components/ConferenceList.tsx +4 -0
  23. src/components/CountdownTimer.tsx +31 -0
  24. src/components/FilterBar.tsx +135 -0
  25. src/components/Header.tsx +123 -0
  26. src/components/ui/accordion.tsx +56 -0
  27. src/components/ui/alert-dialog.tsx +139 -0
  28. src/components/ui/alert.tsx +59 -0
  29. src/components/ui/aspect-ratio.tsx +5 -0
  30. src/components/ui/avatar.tsx +48 -0
  31. src/components/ui/badge.tsx +36 -0
  32. src/components/ui/breadcrumb.tsx +115 -0
  33. src/components/ui/button.tsx +56 -0
  34. src/components/ui/calendar.tsx +63 -0
  35. src/components/ui/card.tsx +79 -0
  36. src/components/ui/carousel.tsx +260 -0
  37. src/components/ui/chart.tsx +363 -0
  38. src/components/ui/checkbox.tsx +28 -0
  39. src/components/ui/collapsible.tsx +9 -0
  40. src/components/ui/command.tsx +153 -0
  41. src/components/ui/context-menu.tsx +198 -0
  42. src/components/ui/dialog.tsx +121 -0
  43. src/components/ui/drawer.tsx +116 -0
  44. src/components/ui/dropdown-menu.tsx +198 -0
  45. src/components/ui/form.tsx +176 -0
  46. src/components/ui/hover-card.tsx +27 -0
  47. src/components/ui/input-otp.tsx +69 -0
  48. src/components/ui/input.tsx +22 -0
  49. src/components/ui/label.tsx +24 -0
  50. src/components/ui/menubar.tsx +234 -0
.dockerignore ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
 
1
+ node_modules
2
+ dist
3
+ .git
4
+ .gitignore
5
+ .env
6
+ .env.*
7
+ *.log
8
+ README.md
.github/scripts/update_conferences.py ADDED
@@ -0,0 +1,265 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import yaml
2
+ import requests
3
+ from datetime import datetime
4
+ from typing import Dict, List, Any
5
+
6
+
7
+ def fetch_conference_files() -> List[Dict[str, Any]]:
8
+ """Fetch all conference YAML files from ccfddl repository."""
9
+
10
+ # First get the directory listing from GitHub API
11
+ api_url = "https://api.github.com/repos/ccfddl/ccf-deadlines/contents/conference/AI"
12
+ response = requests.get(api_url)
13
+ files = response.json()
14
+
15
+ conferences = []
16
+ for file in files:
17
+ if file['name'].endswith('.yml'):
18
+ yaml_content = requests.get(file['download_url']).text
19
+ conf_data = yaml.safe_load(yaml_content)
20
+ # The data is a list with a single item
21
+ if isinstance(conf_data, list) and len(conf_data) > 0:
22
+ conferences.append(conf_data[0])
23
+
24
+ return conferences
25
+
26
+
27
+ def parse_date_range(date_str: str, year: str) -> tuple[str, str]:
28
+ """Parse various date formats and return start and end dates."""
29
+ # Remove the year if it appears at the end of the string
30
+ date_str = date_str.replace(f", {year}", "")
31
+
32
+ # Handle various date formats
33
+ try:
34
+ # Split into start and end dates
35
+ if ' - ' in date_str:
36
+ start, end = date_str.split(' - ')
37
+ elif '-' in date_str:
38
+ start, end = date_str.split('-')
39
+ else:
40
+ # For single date format like "May 19, 2025"
41
+ start = end = date_str
42
+
43
+ # Clean up month abbreviations
44
+ month_map = {
45
+ 'Sept': 'September', # Handle Sept before Sep
46
+ 'Jan': 'January',
47
+ 'Feb': 'February',
48
+ 'Mar': 'March',
49
+ 'Apr': 'April',
50
+ 'Jun': 'June',
51
+ 'Jul': 'July',
52
+ 'Aug': 'August',
53
+ 'Sep': 'September',
54
+ 'Oct': 'October',
55
+ 'Nov': 'November',
56
+ 'Dec': 'December'
57
+ }
58
+
59
+ # Create a set of all month names (full and abbreviated)
60
+ all_months = set(month_map.keys()) | set(month_map.values())
61
+
62
+ # Handle cases like "April 29-May 4"
63
+ has_month = any(month in end for month in all_months)
64
+ if not has_month:
65
+ # End is just a day number, use start's month
66
+ start_parts = start.split()
67
+ if len(start_parts) >= 1:
68
+ end = f"{start_parts[0]} {end.strip()}"
69
+
70
+ # Replace month abbreviations
71
+ for abbr, full in month_map.items():
72
+ start = start.replace(abbr, full)
73
+ end = end.replace(abbr, full)
74
+
75
+ # Clean up any extra spaces
76
+ start = ' '.join(start.split())
77
+ end = ' '.join(end.split())
78
+
79
+ # Parse start date
80
+ start_date = datetime.strptime(f"{start}, {year}", "%B %d, %Y")
81
+
82
+ # Parse end date
83
+ end_date = datetime.strptime(f"{end}, {year}", "%B %d, %Y")
84
+
85
+ return start_date.strftime('%Y-%m-%d'), end_date.strftime('%Y-%m-%d')
86
+
87
+ except Exception as e:
88
+ raise ValueError(f"Could not parse date: {date_str} ({e})")
89
+
90
+
91
+ def transform_conference_data(conferences: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
92
+ """Transform ccfddl format to our format."""
93
+ transformed = []
94
+ current_year = datetime.now().year
95
+
96
+ for conf in conferences:
97
+ # Get the most recent or upcoming conference instance
98
+ recent_conf = None
99
+ if 'confs' in conf:
100
+ for instance in conf['confs']:
101
+ if instance['year'] >= current_year:
102
+ recent_conf = instance
103
+ break
104
+
105
+ if not recent_conf:
106
+ continue
107
+
108
+ # Transform to our format
109
+ transformed_conf = {
110
+ 'title': conf.get('title', ''),
111
+ 'year': recent_conf['year'],
112
+ 'id': recent_conf['id'],
113
+ 'full_name': conf.get('description', ''),
114
+ 'link': recent_conf.get('link', ''),
115
+ 'deadline': recent_conf.get('timeline', [{}])[0].get('deadline', ''),
116
+ 'timezone': recent_conf.get('timezone', ''),
117
+ 'date': recent_conf.get('date', ''),
118
+ 'tags': [], # We'll need to maintain a mapping for tags
119
+ }
120
+
121
+ # Handle city and country fields instead of place
122
+ place = recent_conf.get('place', '')
123
+ if place:
124
+ # Try to parse the place into city and country if it contains a comma
125
+ if ',' in place:
126
+ city, country = place.split(',', 1)
127
+ transformed_conf['city'] = city.strip()
128
+ transformed_conf['country'] = country.strip()
129
+ else:
130
+ # If we can't parse, just set the country
131
+ transformed_conf['country'] = place.strip()
132
+
133
+ # Add optional fields
134
+ timeline = recent_conf.get('timeline', [{}])[0]
135
+ if 'abstract_deadline' in timeline:
136
+ transformed_conf['abstract_deadline'] = timeline['abstract_deadline']
137
+
138
+ # Parse date range for start/end
139
+ try:
140
+ if transformed_conf['date']:
141
+ start_date, end_date = parse_date_range(
142
+ transformed_conf['date'],
143
+ str(transformed_conf['year'])
144
+ )
145
+ transformed_conf['start'] = start_date
146
+ transformed_conf['end'] = end_date
147
+ except Exception as e:
148
+ print(f"Warning: Could not parse date for {transformed_conf['title']}: {e}")
149
+
150
+ # Add rankings as separate field
151
+ if 'rank' in conf:
152
+ rankings = []
153
+ for rank_type, rank_value in conf['rank'].items():
154
+ rankings.append(f"{rank_type.upper()}: {rank_value}")
155
+ if rankings:
156
+ transformed_conf['rankings'] = ', '.join(rankings)
157
+
158
+ transformed.append(transformed_conf)
159
+
160
+ return transformed
161
+
162
+
163
+ def main():
164
+ try:
165
+ # Fetch current conferences.yml
166
+ current_file = 'src/data/conferences.yml'
167
+ with open(current_file, 'r') as f:
168
+ current_conferences = yaml.safe_load(f)
169
+
170
+ # Fetch and transform new data
171
+ new_conferences = fetch_conference_files()
172
+ if not new_conferences:
173
+ print("Warning: No conferences fetched from ccfddl")
174
+ return
175
+
176
+ transformed_conferences = transform_conference_data(new_conferences)
177
+ if not transformed_conferences:
178
+ print("Warning: No conferences transformed")
179
+ return
180
+
181
+ # Create a dictionary of current conferences by ID
182
+ current_conf_dict = {conf['id']: conf for conf in current_conferences}
183
+
184
+ # Create a set of existing conference title+year combinations to check for duplicates
185
+ existing_conf_keys = {(conf['title'], conf['year']) for conf in current_conferences}
186
+
187
+ # Update or add new conferences while preserving existing ones
188
+ for new_conf in transformed_conferences:
189
+ # Check if this is a duplicate based on title and year
190
+ conf_key = (new_conf['title'], new_conf['year'])
191
+
192
+ # Skip if we already have a conference with this title and year but different ID
193
+ if conf_key in existing_conf_keys and new_conf['id'] not in current_conf_dict:
194
+ print(f"Skipping duplicate conference: {new_conf['title']} {new_conf['year']} (ID: {new_conf['id']})")
195
+ continue
196
+
197
+ if new_conf['id'] in current_conf_dict:
198
+ # Update existing conference while preserving fields
199
+ curr_conf = current_conf_dict[new_conf['id']]
200
+
201
+ # Preserve existing fields
202
+ preserved_fields = [
203
+ 'tags', 'venue', 'hindex', 'submission_deadline',
204
+ 'timezone_submission', 'rebuttal_period_start',
205
+ 'rebuttal_period_end', 'final_decision_date',
206
+ 'review_release_date', 'commitment_deadline',
207
+ 'start', 'end', 'note', 'city', 'country' # Added city and country to preserved fields
208
+ ]
209
+ for field in preserved_fields:
210
+ if field in curr_conf:
211
+ new_conf[field] = curr_conf[field]
212
+
213
+ # If start/end not in current conference but we parsed them, keep the parsed ones
214
+ if 'start' not in curr_conf and 'start' in new_conf:
215
+ new_conf['start'] = new_conf['start']
216
+ if 'end' not in curr_conf and 'end' in new_conf:
217
+ new_conf['end'] = new_conf['end']
218
+
219
+ # Preserve existing rankings if available
220
+ if 'rankings' in curr_conf:
221
+ new_conf['rankings'] = curr_conf['rankings']
222
+
223
+ # Update the conference in the dictionary
224
+ current_conf_dict[new_conf['id']] = new_conf
225
+ else:
226
+ # Add new conference to the dictionary
227
+ current_conf_dict[new_conf['id']] = new_conf
228
+ # Add to our set of existing conference keys
229
+ existing_conf_keys.add(conf_key)
230
+
231
+ # Convert back to list and sort by deadline
232
+ all_conferences = list(current_conf_dict.values())
233
+ all_conferences.sort(key=lambda x: x.get('deadline', '9999'))
234
+
235
+ # Write back to file with newlines between conferences
236
+ with open(current_file, 'w') as f:
237
+ for i, conf in enumerate(all_conferences):
238
+ if i > 0:
239
+ f.write('\n\n') # Add two newlines between conferences
240
+
241
+ yaml_str = yaml.dump(
242
+ [conf],
243
+ allow_unicode=True,
244
+ sort_keys=False,
245
+ default_flow_style=False,
246
+ explicit_start=False,
247
+ explicit_end=False,
248
+ width=float("inf"),
249
+ indent=2,
250
+ default_style=None,
251
+ )
252
+ f.write(yaml_str.rstrip()) # Remove trailing whitespace
253
+
254
+ # Add final newline
255
+ f.write('\n')
256
+
257
+ print(f"Successfully updated {len(all_conferences)} conferences")
258
+
259
+ except Exception as e:
260
+ print(f"Error: {e}")
261
+ raise
262
+
263
+
264
+ if __name__ == "__main__":
265
+ main()
.github/workflows/update-conferences.yml ADDED
@@ -0,0 +1,49 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ name: Update Conferences
2
+
3
+ permissions:
4
+ contents: write
5
+
6
+ on:
7
+ workflow_dispatch: # Allow manual trigger
8
+ pull_request:
9
+ paths:
10
+ - 'src/data/conferences.yml'
11
+
12
+ jobs:
13
+ update-conferences:
14
+ runs-on: ubuntu-latest
15
+
16
+ steps:
17
+ - uses: actions/checkout@v3
18
+
19
+ - name: Set up Python
20
+ uses: actions/setup-python@v4
21
+ with:
22
+ python-version: '3.x'
23
+
24
+ - name: Install dependencies
25
+ run: |
26
+ python -m pip install --upgrade pip
27
+ pip install pyyaml requests
28
+
29
+ - name: Update conferences
30
+ run: python .github/scripts/update_conferences.py
31
+
32
+ - name: Check for changes
33
+ id: git-check
34
+ run: |
35
+ git diff --exit-code || echo "changes=true" >> $GITHUB_OUTPUT
36
+
37
+ - name: Create Pull Request
38
+ if: steps.git-check.outputs.changes == 'true'
39
+ uses: peter-evans/create-pull-request@v5
40
+ with:
41
+ commit-message: 'chore: update conference data from ccfddl'
42
+ title: 'Update conference data from ccfddl'
43
+ body: |
44
+ This PR updates the conference data from the ccfddl repository.
45
+
46
+ Auto-generated by GitHub Actions.
47
+ branch: update-conferences
48
+ delete-branch: true
49
+ base: main
.gitignore ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Logs
2
+ logs
3
+ *.log
4
+ npm-debug.log*
5
+ yarn-debug.log*
6
+ yarn-error.log*
7
+ pnpm-debug.log*
8
+ lerna-debug.log*
9
+
10
+ node_modules
11
+ dist
12
+ dist-ssr
13
+ *.local
14
+
15
+ # Editor directories and files
16
+ .vscode/*
17
+ !.vscode/extensions.json
18
+ .idea
19
+ .DS_Store
20
+ *.suo
21
+ *.ntvs*
22
+ *.njsproj
23
+ *.sln
24
+ *.sw?
Dockerfile ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Build stage
2
+ FROM node:20-slim AS builder
3
+
4
+ # Set working directory
5
+ WORKDIR /app
6
+
7
+ # Copy package files
8
+ COPY package*.json ./
9
+
10
+ # Install dependencies
11
+ RUN npm install
12
+
13
+ # Copy project files
14
+ COPY . .
15
+
16
+ # Build the app
17
+ RUN npm run build
18
+
19
+ # Install serve
20
+ RUN npm install -g serve
21
+
22
+ # Expose port 7860 (required by Hugging Face Spaces)
23
+ EXPOSE 7860
24
+
25
+ # Start server
26
+ CMD ["serve", "-s", "dist", "-l", "7860"]
LICENSE ADDED
@@ -0,0 +1,21 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Hugging Face
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
README.md ADDED
@@ -0,0 +1,143 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: AI Deadlines
3
+ emoji: ⚡
4
+ colorFrom: gray
5
+ colorTo: blue
6
+ sdk: docker
7
+ pinned: false
8
+ app_port: 7860
9
+ ---
10
+
11
+ # AI Conference 'Call For Paper' Deadlines
12
+
13
+
14
+ A web app to quickly see submission deadlines to top AI conferences, such as NeurIPS and ICLR.
15
+
16
+ This helps researchers in quickly seeing when to submit their paper.
17
+
18
+ Note: papers can be submitted at any time to [hf.co/papers](https://hf.co/papers) at [hf.co/papers/submit](https://hf.co/papers/submit), assuming the paper is available on [Arxiv](https://arxiv.org/).
19
+
20
+ The benefit of hf.co/papers is that it allows people to quickly find related artifacts, such as models, datasets and demos. See [this paper page](https://huggingface.co/papers/2502.04328) as a nice example - it has 3 models, 1 dataset and 1 demo linked.
21
+
22
+ ## Project info
23
+
24
+ This project is entirely based on the awesome https://github.com/paperswithcode/ai-deadlines. As that repository is no longer maintained, we decided to make an up-to-date version along with a new UI. It was bootstrapped using [Lovable](https://lovable.dev/) and [Cursor](https://www.cursor.com/).
25
+
26
+ New data is fetched from https://github.com/ccfddl/ccf-deadlines/tree/main/conference/AI thanks to [this comment](https://github.com/paperswithcode/ai-deadlines/issues/723#issuecomment-2603420945).
27
+
28
+ A CRON job (set up as a [Github action](.github/workflows/update-conferences.yml)) automatically updates the data present at src/data/conferences.yml.
29
+
30
+ **URL**: https://huggingface.co/spaces/huggingface/ai-deadlines
31
+
32
+ ## Contribute
33
+
34
+ Contributions are very welcome!
35
+
36
+ To keep things minimal, we mainly focus on top-tier conferences in AI.
37
+
38
+ To add or update a deadline:
39
+ - Fork the repository
40
+ - Update [src/data/conferences.yml](src/data/conferences.yml)
41
+ - Make sure it has the `title`, `year`, `id`, `link`, `deadline`, `timezone`, `date`, `city`, `country`, `tags` attributes
42
+ + See available timezone strings [here](https://momentjs.com/timezone/).
43
+ - Optionally add a `venue`, `note` and `abstract_deadline` in case this info is known
44
+ - Optionally add `hindex` (refers to h5-index from [here](https://scholar.google.com/citations?view_op=top_venues&vq=eng))
45
+ - Example:
46
+ ```yaml
47
+ - title: BestConf
48
+ year: 2022
49
+ id: bestconf22 # title as lower case + last two digits of year
50
+ full_name: Best Conference for Anything # full conference name
51
+ link: link-to-website.com
52
+ deadline: YYYY-MM-DD HH:SS
53
+ abstract_deadline: YYYY-MM-DD HH:SS
54
+ timezone: Asia/Seoul
55
+ city: Incheon
56
+ country: South Korea
57
+ venue: Incheon Conference Centre, South Korea
58
+ date: September, 18-22, 2022
59
+ start: YYYY-MM-DD
60
+ end: YYYY-MM-DD
61
+ paperslink: link-to-full-paper-list.com
62
+ pwclink: link-to-papers-with-code.com
63
+ hindex: 100.0
64
+ tags:
65
+ - machine learning
66
+ note: Important
67
+ ```
68
+ - Send a pull request to update [src/data/conferences.yml](src/data/conferences.yml).
69
+
70
+ ## How to run locally
71
+
72
+ If you want to work locally using your own IDE, you can clone this repo and push changes.
73
+
74
+ The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
75
+
76
+ Follow these steps:
77
+
78
+ ```sh
79
+ # Step 1: Clone the repository using the project's Git URL.
80
+ git clone https://github.com/huggingface/ai-deadlines
81
+
82
+ # Step 2: Navigate to the project directory.
83
+ cd ai-deadlines
84
+
85
+ # Step 3: Install the necessary dependencies.
86
+ npm i
87
+
88
+ # Step 4: Start the development server with auto-reloading and an instant preview.
89
+ npm run dev
90
+ ```
91
+
92
+ This runs the app at http://localhost:8080/.
93
+
94
+ ## Deploy with Docker
95
+
96
+ First build the Docker image as follows:
97
+
98
+ ```bash
99
+ docker build -t ai-deadlines .
100
+ ```
101
+
102
+ Next it can be run as follows:
103
+
104
+ ```bash
105
+ docker run -it -p 8080:8080 ai-deadlines
106
+ ```
107
+
108
+ You can see it in your web browser at http://localhost:8080/.
109
+
110
+ ## Deploy on the cloud
111
+
112
+ One way to deploy this on a cloud is by using [Artifact Registry](https://cloud.google.com/artifact-registry/docs) (for hosting the Docker image) and [Cloud Run](https://cloud.google.com/run?hl=en) (a serverless service by Google to run Docker containers). See [this YouTube video](https://youtu.be/cw34KMPSt4k?si=UbzNRobNzib93uDl) for a nice intro.
113
+
114
+ Make sure to:
115
+ - create a [Google Cloud project](https://console.cloud.google.com/)
116
+ - set up a billing account
117
+ - have the [gcloud SDK installed](https://cloud.google.com/sdk/docs/install).
118
+
119
+ To deploy, simply run:
120
+
121
+ ```bash
122
+ gcloud auth login
123
+ gcloud auth application-default login
124
+ gcloud run deploy --source .
125
+ ```
126
+
127
+ ## Technologies used
128
+
129
+ This project is built with:
130
+
131
+ - Vite
132
+ - TypeScript
133
+ - React
134
+ - shadcn-ui
135
+ - Tailwind CSS
136
+
137
+ ## License
138
+
139
+ This project is licensed under [MIT](LICENSE).
140
+
141
+ ## Maintainers
142
+
143
+ Feel free to just open an issue. Otherwise contact @nielsrogge
components.json ADDED
@@ -0,0 +1,20 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "$schema": "https://ui.shadcn.com/schema.json",
3
+ "style": "default",
4
+ "rsc": false,
5
+ "tsx": true,
6
+ "tailwind": {
7
+ "config": "tailwind.config.ts",
8
+ "css": "src/index.css",
9
+ "baseColor": "slate",
10
+ "cssVariables": true,
11
+ "prefix": ""
12
+ },
13
+ "aliases": {
14
+ "components": "@/components",
15
+ "utils": "@/lib/utils",
16
+ "ui": "@/components/ui",
17
+ "lib": "@/lib",
18
+ "hooks": "@/hooks"
19
+ }
20
+ }
eslint.config.js ADDED
@@ -0,0 +1,29 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import js from "@eslint/js";
2
+ import globals from "globals";
3
+ import reactHooks from "eslint-plugin-react-hooks";
4
+ import reactRefresh from "eslint-plugin-react-refresh";
5
+ import tseslint from "typescript-eslint";
6
+
7
+ export default tseslint.config(
8
+ { ignores: ["dist"] },
9
+ {
10
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
11
+ files: ["**/*.{ts,tsx}"],
12
+ languageOptions: {
13
+ ecmaVersion: 2020,
14
+ globals: globals.browser,
15
+ },
16
+ plugins: {
17
+ "react-hooks": reactHooks,
18
+ "react-refresh": reactRefresh,
19
+ },
20
+ rules: {
21
+ ...reactHooks.configs.recommended.rules,
22
+ "react-refresh/only-export-components": [
23
+ "warn",
24
+ { allowConstantExport: true },
25
+ ],
26
+ "@typescript-eslint/no-unused-vars": "off",
27
+ },
28
+ }
29
+ );
index.html ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>ai-deadlines-hub</title>
7
+ <meta name="description" content="Lovable Generated Project" />
8
+ <meta name="author" content="Lovable" />
9
+ <meta property="og:image" content="/og-image.png" />
10
+ </head>
11
+
12
+ <body>
13
+ <div id="root"></div>
14
+ <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
15
+ <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
16
+ <script type="module" src="/src/main.tsx"></script>
17
+ </body>
18
+ </html>
nginx.conf ADDED
@@ -0,0 +1,32 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ server {
2
+ listen 7860;
3
+ server_name _;
4
+ root /usr/share/nginx/html;
5
+ index index.html;
6
+
7
+ # Specify client body temp path
8
+ client_body_temp_path /tmp/nginx/client_temp;
9
+ proxy_temp_path /tmp/nginx/proxy_temp;
10
+ fastcgi_temp_path /tmp/nginx/fastcgi_temp;
11
+ uwsgi_temp_path /tmp/nginx/uwsgi_temp;
12
+ scgi_temp_path /tmp/nginx/scgi_temp;
13
+
14
+ # Enable gzip compression
15
+ gzip on;
16
+ gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
17
+
18
+ location / {
19
+ try_files $uri $uri/ /index.html;
20
+ }
21
+
22
+ # Cache static assets
23
+ location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
24
+ expires 30d;
25
+ add_header Cache-Control "public, no-transform";
26
+ }
27
+
28
+ # Security headers
29
+ add_header X-Frame-Options "SAMEORIGIN";
30
+ add_header X-XSS-Protection "1; mode=block";
31
+ add_header X-Content-Type-Options "nosniff";
32
+ }
package-lock.json ADDED
The diff for this file is too large to render. See raw diff
 
package.json ADDED
@@ -0,0 +1,85 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "vite_react_shadcn_ts",
3
+ "private": true,
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "vite build",
9
+ "build:dev": "vite build --mode development",
10
+ "lint": "eslint .",
11
+ "preview": "vite preview"
12
+ },
13
+ "dependencies": {
14
+ "@hookform/resolvers": "^3.9.0",
15
+ "@radix-ui/react-accordion": "^1.2.0",
16
+ "@radix-ui/react-alert-dialog": "^1.1.1",
17
+ "@radix-ui/react-aspect-ratio": "^1.1.0",
18
+ "@radix-ui/react-avatar": "^1.1.0",
19
+ "@radix-ui/react-checkbox": "^1.1.1",
20
+ "@radix-ui/react-collapsible": "^1.1.0",
21
+ "@radix-ui/react-context-menu": "^2.2.1",
22
+ "@radix-ui/react-dialog": "^1.1.2",
23
+ "@radix-ui/react-dropdown-menu": "^2.1.1",
24
+ "@radix-ui/react-hover-card": "^1.1.1",
25
+ "@radix-ui/react-label": "^2.1.0",
26
+ "@radix-ui/react-menubar": "^1.1.1",
27
+ "@radix-ui/react-navigation-menu": "^1.2.0",
28
+ "@radix-ui/react-popover": "^1.1.1",
29
+ "@radix-ui/react-progress": "^1.1.0",
30
+ "@radix-ui/react-radio-group": "^1.2.0",
31
+ "@radix-ui/react-scroll-area": "^1.1.0",
32
+ "@radix-ui/react-select": "^2.1.1",
33
+ "@radix-ui/react-separator": "^1.1.0",
34
+ "@radix-ui/react-slider": "^1.2.0",
35
+ "@radix-ui/react-slot": "^1.1.0",
36
+ "@radix-ui/react-switch": "^1.1.0",
37
+ "@radix-ui/react-tabs": "^1.1.0",
38
+ "@radix-ui/react-toast": "^1.2.1",
39
+ "@radix-ui/react-toggle": "^1.1.0",
40
+ "@radix-ui/react-toggle-group": "^1.1.0",
41
+ "@radix-ui/react-tooltip": "^1.1.4",
42
+ "@tanstack/react-query": "^5.56.2",
43
+ "class-variance-authority": "^0.7.1",
44
+ "clsx": "^2.1.1",
45
+ "cmdk": "^1.0.0",
46
+ "date-fns": "^2.30.0",
47
+ "date-fns-tz": "^2.0.0",
48
+ "embla-carousel-react": "^8.3.0",
49
+ "input-otp": "^1.2.4",
50
+ "lucide-react": "^0.462.0",
51
+ "next-themes": "^0.3.0",
52
+ "react": "^18.3.1",
53
+ "react-day-picker": "^8.10.1",
54
+ "react-dom": "^18.3.1",
55
+ "react-hook-form": "^7.53.0",
56
+ "react-resizable-panels": "^2.1.3",
57
+ "react-router-dom": "^6.26.2",
58
+ "recharts": "^2.12.7",
59
+ "sonner": "^1.5.0",
60
+ "tailwind-merge": "^2.5.2",
61
+ "tailwindcss-animate": "^1.0.7",
62
+ "vaul": "^0.9.3",
63
+ "zod": "^3.23.8"
64
+ },
65
+ "devDependencies": {
66
+ "@eslint/js": "^9.9.0",
67
+ "@modyfi/vite-plugin-yaml": "^1.1.1",
68
+ "@tailwindcss/typography": "^0.5.15",
69
+ "@types/node": "^22.5.5",
70
+ "@types/react": "^18.3.3",
71
+ "@types/react-dom": "^18.3.0",
72
+ "@vitejs/plugin-react-swc": "^3.5.0",
73
+ "autoprefixer": "^10.4.20",
74
+ "eslint": "^9.9.0",
75
+ "eslint-plugin-react-hooks": "^5.1.0-rc.0",
76
+ "eslint-plugin-react-refresh": "^0.4.9",
77
+ "globals": "^15.9.0",
78
+ "lovable-tagger": "^1.1.3",
79
+ "postcss": "^8.4.47",
80
+ "tailwindcss": "^3.4.11",
81
+ "typescript": "^5.5.3",
82
+ "typescript-eslint": "^8.0.1",
83
+ "vite": "^5.4.1"
84
+ }
85
+ }
postcss.config.js ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
 
1
+ export default {
2
+ plugins: {
3
+ tailwindcss: {},
4
+ autoprefixer: {},
5
+ },
6
+ }
public/favicon.ico ADDED
public/placeholder.svg ADDED
src/App.css ADDED
@@ -0,0 +1,42 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ #root {
2
+ max-width: 1280px;
3
+ margin: 0 auto;
4
+ padding: 2rem;
5
+ text-align: center;
6
+ }
7
+
8
+ .logo {
9
+ height: 6em;
10
+ padding: 1.5em;
11
+ will-change: filter;
12
+ transition: filter 300ms;
13
+ }
14
+ .logo:hover {
15
+ filter: drop-shadow(0 0 2em #646cffaa);
16
+ }
17
+ .logo.react:hover {
18
+ filter: drop-shadow(0 0 2em #61dafbaa);
19
+ }
20
+
21
+ @keyframes logo-spin {
22
+ from {
23
+ transform: rotate(0deg);
24
+ }
25
+ to {
26
+ transform: rotate(360deg);
27
+ }
28
+ }
29
+
30
+ @media (prefers-reduced-motion: no-preference) {
31
+ a:nth-of-type(2) .logo {
32
+ animation: logo-spin infinite 20s linear;
33
+ }
34
+ }
35
+
36
+ .card {
37
+ padding: 2em;
38
+ }
39
+
40
+ .read-the-docs {
41
+ color: #888;
42
+ }
src/App.tsx ADDED
@@ -0,0 +1,30 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Toaster } from "@/components/ui/toaster";
2
+ import { Toaster as Sonner } from "@/components/ui/sonner";
3
+ import { TooltipProvider } from "@/components/ui/tooltip";
4
+ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
5
+ import { BrowserRouter, Routes, Route } from "react-router-dom";
6
+ import Index from "./pages/Index";
7
+ import NotFound from "./pages/NotFound";
8
+ import Calendar from "./pages/Calendar";
9
+
10
+ const queryClient = new QueryClient();
11
+
12
+ const App = () => (
13
+ <QueryClientProvider client={queryClient}>
14
+ <TooltipProvider>
15
+ <Toaster />
16
+ <Sonner />
17
+ <BrowserRouter>
18
+ <div className="min-h-screen w-full" style={{ WebkitOverflowScrolling: "touch" }}>
19
+ <Routes>
20
+ <Route path="/" element={<Index />} />
21
+ <Route path="/calendar" element={<Calendar />} />
22
+ <Route path="*" element={<NotFound />} />
23
+ </Routes>
24
+ </div>
25
+ </BrowserRouter>
26
+ </TooltipProvider>
27
+ </QueryClientProvider>
28
+ );
29
+
30
+ export default App;
src/components/ConferenceCalendar.tsx ADDED
@@ -0,0 +1,164 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { useState } from "react";
2
+ import { Calendar } from "@/components/ui/calendar";
3
+ import { Conference } from "@/types/conference";
4
+ import { parseISO, format, parse, startOfMonth } from "date-fns";
5
+
6
+ interface ConferenceCalendarProps {
7
+ conferences: Conference[];
8
+ }
9
+
10
+ const ConferenceCalendar = ({ conferences }: ConferenceCalendarProps) => {
11
+ const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
12
+ const [currentMonth, setCurrentMonth] = useState<Date>(new Date());
13
+
14
+ // Handle month change
15
+ const handleMonthChange = (month: Date) => {
16
+ setCurrentMonth(month);
17
+ setSelectedDate(undefined); // Clear selected date when changing months
18
+ };
19
+
20
+ // Convert conference dates to calendar events
21
+ const conferenceEvents = conferences.map(conf => {
22
+ let startDate: Date | null = null;
23
+ let endDate: Date | null = null;
24
+
25
+ try {
26
+ // Parse both start and end dates
27
+ if (conf.start && conf.end) {
28
+ startDate = parseISO(conf.start);
29
+ endDate = parseISO(conf.end);
30
+ }
31
+ // If no start/end fields, try to parse from date field
32
+ else if (conf.date) {
33
+ const [startStr, endStr] = conf.date.split(/[-–]/).map(d => d.trim());
34
+
35
+ try {
36
+ // Try parsing start date
37
+ startDate = parse(startStr, 'MMM d, yyyy', new Date()) ||
38
+ parse(startStr, 'MMMM d, yyyy', new Date()) ||
39
+ parseISO(startStr);
40
+
41
+ // Try parsing end date if it exists
42
+ if (endStr) {
43
+ endDate = parse(endStr, 'MMM d, yyyy', new Date()) ||
44
+ parse(endStr, 'MMMM d, yyyy', new Date()) ||
45
+ parseISO(endStr);
46
+ } else {
47
+ // If no end date, use start date
48
+ endDate = startDate;
49
+ }
50
+ } catch (error) {
51
+ console.warn(`Failed to parse date range for conference ${conf.title}:`, error);
52
+ }
53
+ }
54
+
55
+ // Only return event if we successfully parsed both dates
56
+ if (startDate && endDate && isValidDate(startDate) && isValidDate(endDate)) {
57
+ return {
58
+ startDate,
59
+ endDate,
60
+ title: conf.title,
61
+ conference: conf
62
+ };
63
+ }
64
+ return null;
65
+ } catch (error) {
66
+ console.warn(`Failed to parse dates for conference ${conf.title}:`, error);
67
+ return null;
68
+ }
69
+ }).filter(event => event !== null);
70
+
71
+ // Helper function to check if date is valid
72
+ function isValidDate(date: Date) {
73
+ return date instanceof Date && !isNaN(date.getTime());
74
+ }
75
+
76
+ // Get events for the selected date
77
+ const getEventsForDate = (date: Date) => {
78
+ if (!date || !isValidDate(date)) return [];
79
+ return conferenceEvents.filter(event =>
80
+ event && event.startDate && event.endDate &&
81
+ date >= event.startDate && date <= event.endDate
82
+ );
83
+ };
84
+
85
+ // Get events for the current month
86
+ const getEventsForMonth = (date: Date) => {
87
+ const monthStart = startOfMonth(date);
88
+ const nextMonthStart = new Date(date.getFullYear(), date.getMonth() + 1, 1);
89
+
90
+ return conferenceEvents.filter(event =>
91
+ event && event.startDate && event.endDate &&
92
+ ((event.startDate >= monthStart && event.startDate < nextMonthStart) ||
93
+ (event.endDate >= monthStart && event.endDate < nextMonthStart) ||
94
+ (event.startDate <= monthStart && event.endDate >= nextMonthStart))
95
+ );
96
+ };
97
+
98
+ // Create footer content
99
+ const footer = (
100
+ <div className="mt-3">
101
+ <h3 className="font-medium">
102
+ Events in {format(currentMonth, 'MMMM yyyy')}:
103
+ </h3>
104
+ {getEventsForMonth(currentMonth).length > 0 ? (
105
+ <ul className="mt-2 space-y-1">
106
+ {getEventsForMonth(currentMonth).map((event, index) => (
107
+ <li key={index} className="text-sm">
108
+ {event.title} ({format(event.startDate, 'MMM d')}-{format(event.endDate, 'MMM d')}) - {
109
+ event.conference.venue ||
110
+ [event.conference.city, event.conference.country].filter(Boolean).join(", ") ||
111
+ "Location TBD"
112
+ }
113
+ </li>
114
+ ))}
115
+ </ul>
116
+ ) : (
117
+ <p className="text-sm text-muted-foreground">No events this month</p>
118
+ )}
119
+ {selectedDate && (
120
+ <div className="mt-4">
121
+ <h3 className="font-medium">
122
+ Events on {format(selectedDate, 'MMMM d, yyyy')}:
123
+ </h3>
124
+ {getEventsForDate(selectedDate).length > 0 ? (
125
+ <ul className="mt-2 space-y-1">
126
+ {getEventsForDate(selectedDate).map((event, index) => (
127
+ <li key={index} className="text-sm">
128
+ {event.title} - {
129
+ event.conference.venue ||
130
+ [event.conference.city, event.conference.country].filter(Boolean).join(", ") ||
131
+ "Location TBD"
132
+ }
133
+ </li>
134
+ ))}
135
+ </ul>
136
+ ) : (
137
+ <p className="text-sm text-muted-foreground">No events on this date</p>
138
+ )}
139
+ </div>
140
+ )}
141
+ </div>
142
+ );
143
+
144
+ return (
145
+ <div className="flex flex-col items-center space-y-4 p-4">
146
+ <Calendar
147
+ mode="single"
148
+ selected={selectedDate}
149
+ onSelect={setSelectedDate}
150
+ footer={footer}
151
+ month={currentMonth}
152
+ onMonthChange={handleMonthChange}
153
+ modifiers={{
154
+ event: (date) => getEventsForDate(date).length > 0
155
+ }}
156
+ modifiersStyles={{
157
+ event: { fontWeight: 'bold', textDecoration: 'underline' }
158
+ }}
159
+ />
160
+ </div>
161
+ );
162
+ };
163
+
164
+ export default ConferenceCalendar;
src/components/ConferenceCard.tsx ADDED
@@ -0,0 +1,161 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Globe, Tag, Clock } from "lucide-react";
2
+ import { Conference } from "@/types/conference";
3
+ import { isValid, isPast } from "date-fns";
4
+ import ConferenceDialog from "./ConferenceDialog";
5
+ import CountdownTimer from "./CountdownTimer";
6
+ import { useState } from "react";
7
+ import { getDeadlineInLocalTime } from '@/utils/dateUtils';
8
+
9
+ const ConferenceCard = ({
10
+ title,
11
+ full_name,
12
+ year,
13
+ date,
14
+ deadline,
15
+ timezone,
16
+ tags = [],
17
+ link,
18
+ note,
19
+ abstract_deadline,
20
+ city,
21
+ country,
22
+ venue,
23
+ ...conferenceProps
24
+ }: Conference) => {
25
+ const [dialogOpen, setDialogOpen] = useState(false);
26
+ const deadlineDate = getDeadlineInLocalTime(deadline, timezone);
27
+
28
+ // Create location string by concatenating city and country
29
+ const location = [city, country].filter(Boolean).join(", ");
30
+
31
+ const handleCardClick = (e: React.MouseEvent) => {
32
+ if (!(e.target as HTMLElement).closest('a') &&
33
+ !(e.target as HTMLElement).closest('.tag-button')) {
34
+ setDialogOpen(true);
35
+ }
36
+ };
37
+
38
+ const handleTagClick = (e: React.MouseEvent, tag: string) => {
39
+ e.stopPropagation();
40
+ const searchParams = new URLSearchParams(window.location.search);
41
+ const currentTags = searchParams.get('tags')?.split(',') || [];
42
+
43
+ let newTags;
44
+ if (currentTags.includes(tag)) {
45
+ newTags = currentTags.filter(t => t !== tag);
46
+ } else {
47
+ newTags = [...currentTags, tag];
48
+ }
49
+
50
+ if (newTags.length > 0) {
51
+ searchParams.set('tags', newTags.join(','));
52
+ } else {
53
+ searchParams.delete('tags');
54
+ }
55
+
56
+ const newUrl = `${window.location.pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
57
+ window.history.pushState({}, '', newUrl);
58
+ window.dispatchEvent(new CustomEvent('urlchange', { detail: { tag } }));
59
+ };
60
+
61
+ return (
62
+ <>
63
+ <div
64
+ className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-4 flex flex-col cursor-pointer"
65
+ onClick={handleCardClick}
66
+ >
67
+ <div className="flex justify-between items-start mb-2">
68
+ <div className="flex-1">
69
+ <h3 className="text-lg font-semibold text-primary">
70
+ {title} {year}
71
+ {link && (
72
+ <a
73
+ href={link}
74
+ target="_blank"
75
+ rel="noopener noreferrer"
76
+ className="ml-2 hover:underline"
77
+ onClick={(e) => e.stopPropagation()}
78
+ >
79
+ <Globe className="h-4 w-4 inline flex-shrink-0" />
80
+ </a>
81
+ )}
82
+ </h3>
83
+ <CountdownTimer
84
+ deadline={deadlineDate}
85
+ className="mt-1"
86
+ />
87
+ {full_name && (
88
+ <p className="text-sm text-gray-600 mt-1">
89
+ {full_name}
90
+ </p>
91
+ )}
92
+ <div className="mt-2 text-sm text-gray-600">
93
+ {date}. {location}
94
+ </div>
95
+ {note && (
96
+ <div className="text-xs text-gray-500 mt-1">
97
+ Note: {note.replace(/<[^>]*>/g, '')}
98
+ </div>
99
+ )}
100
+ <div className="flex items-center text-gray-600 mt-2">
101
+ <Clock className="h-4 w-4 mr-2 flex-shrink-0" />
102
+ <span className="text-sm">
103
+ Deadline: {deadline === 'TBD' ? 'TBD' : deadlineDate?.toLocaleString('en-US', {
104
+ weekday: 'short',
105
+ year: 'numeric',
106
+ month: 'short',
107
+ day: 'numeric',
108
+ hour: '2-digit',
109
+ minute: '2-digit',
110
+ timeZoneName: 'short'
111
+ })}
112
+ </span>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <div className="flex flex-col gap-2 mb-3">
118
+
119
+ </div>
120
+
121
+ {Array.isArray(tags) && tags.length > 0 && (
122
+ <div className="flex flex-wrap gap-2">
123
+ {tags.map((tag) => (
124
+ <button
125
+ key={tag}
126
+ className="tag tag-button"
127
+ onClick={(e) => handleTagClick(e, tag)}
128
+ >
129
+ <Tag className="h-3 w-3 mr-1" />
130
+ {tag}
131
+ </button>
132
+ ))}
133
+ </div>
134
+ )}
135
+ </div>
136
+
137
+ <ConferenceDialog
138
+ conference={{
139
+ title,
140
+ full_name,
141
+ year,
142
+ date,
143
+ deadline,
144
+ timezone,
145
+ tags,
146
+ link,
147
+ note,
148
+ abstract_deadline,
149
+ city,
150
+ country,
151
+ venue,
152
+ ...conferenceProps
153
+ }}
154
+ open={dialogOpen}
155
+ onOpenChange={setDialogOpen}
156
+ />
157
+ </>
158
+ );
159
+ };
160
+
161
+ export default ConferenceCard;
src/components/ConferenceDialog.tsx ADDED
@@ -0,0 +1,368 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import {
2
+ Dialog,
3
+ DialogContent,
4
+ DialogHeader,
5
+ DialogTitle,
6
+ DialogDescription,
7
+ } from "@/components/ui/dialog";
8
+ import { CalendarDays, Globe, Tag, Clock, AlarmClock, CalendarPlus } from "lucide-react";
9
+ import { Conference } from "@/types/conference";
10
+ import { formatDistanceToNow, parseISO, isValid, format, parse, addDays } from "date-fns";
11
+ import { Button } from "@/components/ui/button";
12
+ import {
13
+ DropdownMenu,
14
+ DropdownMenuContent,
15
+ DropdownMenuItem,
16
+ DropdownMenuTrigger,
17
+ } from "@/components/ui/dropdown-menu";
18
+ import { useState, useEffect } from "react";
19
+ import { getDeadlineInLocalTime } from '@/utils/dateUtils';
20
+
21
+ interface ConferenceDialogProps {
22
+ conference: Conference;
23
+ open: boolean;
24
+ onOpenChange: (open: boolean) => void;
25
+ }
26
+
27
+ const ConferenceDialog = ({ conference, open, onOpenChange }: ConferenceDialogProps) => {
28
+ console.log('Conference object:', conference);
29
+ const deadlineDate = getDeadlineInLocalTime(conference.deadline, conference.timezone);
30
+ const [countdown, setCountdown] = useState<string>('');
31
+
32
+ // Replace the current location string creation with this more verbose version
33
+ const getLocationString = () => {
34
+ console.log('Venue:', conference.venue);
35
+ console.log('City:', conference.city);
36
+ console.log('Country:', conference.country);
37
+
38
+ if (conference.venue) {
39
+ return conference.venue;
40
+ }
41
+
42
+ const cityCountryArray = [conference.city, conference.country].filter(Boolean);
43
+ console.log('City/Country array after filter:', cityCountryArray);
44
+
45
+ const cityCountryString = cityCountryArray.join(", ");
46
+ console.log('Final location string:', cityCountryString);
47
+
48
+ return cityCountryString || "Location TBD"; // Fallback if everything is empty
49
+ };
50
+
51
+ // Use the function result
52
+ const location = getLocationString();
53
+
54
+ useEffect(() => {
55
+ const calculateTimeLeft = () => {
56
+ if (!deadlineDate || !isValid(deadlineDate)) {
57
+ setCountdown('TBD');
58
+ return;
59
+ }
60
+
61
+ const now = new Date();
62
+ const difference = deadlineDate.getTime() - now.getTime();
63
+
64
+ if (difference <= 0) {
65
+ setCountdown('Deadline passed');
66
+ return;
67
+ }
68
+
69
+ const days = Math.floor(difference / (1000 * 60 * 60 * 24));
70
+ const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
71
+ const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
72
+ const seconds = Math.floor((difference % (1000 * 60)) / 1000);
73
+
74
+ setCountdown(`${days}d ${hours}h ${minutes}m ${seconds}s`);
75
+ };
76
+
77
+ calculateTimeLeft();
78
+ const timer = setInterval(calculateTimeLeft, 1000);
79
+ return () => clearInterval(timer);
80
+ }, [deadlineDate]);
81
+
82
+ const getCountdownColor = () => {
83
+ if (!deadlineDate || !isValid(deadlineDate)) return "text-neutral-600";
84
+ const daysRemaining = Math.ceil((deadlineDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24));
85
+ if (daysRemaining <= 7) return "text-red-600";
86
+ if (daysRemaining <= 30) return "text-orange-600";
87
+ return "text-green-600";
88
+ };
89
+
90
+ const parseDateFromString = (dateStr: string) => {
91
+ try {
92
+ // Handle formats like "October 19-25, 2025" or "Sept 9-12, 2025"
93
+ const [monthDay, year] = dateStr.split(", ");
94
+ const [month, dayRange] = monthDay.split(" ");
95
+ const [startDay] = dayRange.split("-");
96
+
97
+ // Construct a date string in a format that can be parsed
98
+ const dateString = `${month} ${startDay} ${year}`;
99
+ const date = parse(dateString, 'MMMM d yyyy', new Date());
100
+
101
+ if (!isValid(date)) {
102
+ // Try alternative format for abbreviated months
103
+ return parse(dateString, 'MMM d yyyy', new Date());
104
+ }
105
+
106
+ return date;
107
+ } catch (error) {
108
+ console.error("Error parsing date:", error);
109
+ return new Date();
110
+ }
111
+ };
112
+
113
+ const createCalendarEvent = (type: 'google' | 'apple') => {
114
+ try {
115
+ if (!conference.deadline || conference.deadline === 'TBD') {
116
+ throw new Error('No valid deadline found');
117
+ }
118
+
119
+ // Parse the deadline date
120
+ const deadlineDate = parseISO(conference.deadline);
121
+ if (!isValid(deadlineDate)) {
122
+ throw new Error('Invalid deadline date');
123
+ }
124
+
125
+ // Create an end date 1 hour after the deadline
126
+ const endDate = new Date(deadlineDate.getTime() + (60 * 60 * 1000));
127
+
128
+ const formatDateForGoogle = (date: Date) => format(date, "yyyyMMdd'T'HHmmss'Z'");
129
+ const formatDateForApple = (date: Date) => format(date, "yyyyMMdd'T'HHmmss'Z'");
130
+
131
+ const title = encodeURIComponent(`${conference.title} deadline`);
132
+ const locationStr = encodeURIComponent(location);
133
+ const description = encodeURIComponent(
134
+ `Paper Submission Deadline for ${conference.full_name || conference.title}\n` +
135
+ (conference.abstract_deadline ? `Abstract Deadline: ${conference.abstract_deadline}\n` : '') +
136
+ `Dates: ${conference.date}\n` +
137
+ `Location: ${location}\n` +
138
+ (conference.link ? `Website: ${conference.link}` : '')
139
+ );
140
+
141
+ if (type === 'google') {
142
+ const url = `https://calendar.google.com/calendar/render?action=TEMPLATE` +
143
+ `&text=${title}` +
144
+ `&dates=${formatDateForGoogle(deadlineDate)}/${formatDateForGoogle(endDate)}` +
145
+ `&details=${description}` +
146
+ `&location=${locationStr}` +
147
+ `&sprop=website:${encodeURIComponent(conference.link || '')}`;
148
+ window.open(url, '_blank');
149
+ } else {
150
+ const url = `data:text/calendar;charset=utf8,BEGIN:VCALENDAR
151
+ VERSION:2.0
152
+ BEGIN:VEVENT
153
+ URL:${conference.link || ''}
154
+ DTSTART:${formatDateForApple(deadlineDate)}
155
+ DTEND:${formatDateForApple(endDate)}
156
+ SUMMARY:${title}
157
+ DESCRIPTION:${description}
158
+ LOCATION:${location}
159
+ END:VEVENT
160
+ END:VCALENDAR`;
161
+
162
+ const link = document.createElement('a');
163
+ link.href = url;
164
+ link.download = `${conference.title.toLowerCase().replace(/\s+/g, '-')}-deadline.ics`;
165
+ document.body.appendChild(link);
166
+ link.click();
167
+ document.body.removeChild(link);
168
+ }
169
+ } catch (error) {
170
+ console.error("Error creating calendar event:", error);
171
+ alert("Sorry, there was an error creating the calendar event. Please try again.");
172
+ }
173
+ };
174
+
175
+ const generateGoogleMapsUrl = (venue: string | undefined, place: string): string => {
176
+ return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(venue || place)}`;
177
+ };
178
+
179
+ const formatDeadlineDisplay = () => {
180
+ if (!deadlineDate || !isValid(deadlineDate)) return null;
181
+
182
+ const localTZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
183
+ return (
184
+ <div className="text-sm text-neutral-500">
185
+ <div>{format(deadlineDate, "MMMM d, yyyy 'at' HH:mm:ss")} ({localTZ})</div>
186
+ {conference.timezone && conference.timezone !== localTZ && (
187
+ <div className="text-xs">
188
+ Conference timezone: {conference.timezone}
189
+ </div>
190
+ )}
191
+ </div>
192
+ );
193
+ };
194
+
195
+ // Add these new functions to handle consistent date conversion
196
+ const getLocalDeadline = (dateString: string | undefined) => {
197
+ if (!dateString || dateString === 'TBD') return null;
198
+ return getDeadlineInLocalTime(dateString, conference.timezone);
199
+ };
200
+
201
+ // Format any deadline date consistently
202
+ const formatDeadlineDate = (dateString: string | undefined) => {
203
+ if (!dateString || dateString === 'TBD') return dateString || 'TBD';
204
+
205
+ const localDate = getLocalDeadline(dateString);
206
+ if (!localDate || !isValid(localDate)) return dateString;
207
+
208
+ const localTZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
209
+ return `${format(localDate, "MMMM d, yyyy")} (${localTZ})`;
210
+ };
211
+
212
+ return (
213
+ <Dialog open={open} onOpenChange={onOpenChange}>
214
+ <DialogContent
215
+ className="max-w-md w-full"
216
+ >
217
+ <DialogHeader>
218
+ <DialogTitle className="text-2xl font-bold text-blue-600">
219
+ {conference.title} {conference.year}
220
+ </DialogTitle>
221
+ <DialogDescription className="text-base text-gray-700">
222
+ {conference.full_name}
223
+ </DialogDescription>
224
+ </DialogHeader>
225
+
226
+ <div className="space-y-6 mt-4">
227
+ <div className="space-y-4">
228
+ <div className="flex items-start gap-2">
229
+ <CalendarDays className="h-5 w-5 mt-0.5 text-gray-500" />
230
+ <div>
231
+ <p className="font-medium">Dates</p>
232
+ <p className="text-sm text-gray-500">{conference.date}</p>
233
+ </div>
234
+ </div>
235
+
236
+ <div className="flex items-start gap-2">
237
+ <Globe className="h-5 w-5 mt-0.5 text-gray-500" />
238
+ <div>
239
+ <p className="font-medium">Location</p>
240
+ <p className="text-sm text-gray-500">
241
+ {conference.venue || [conference.city, conference.country].filter(Boolean).join(", ")}
242
+ </p>
243
+ </div>
244
+ </div>
245
+
246
+ <div className="flex items-start gap-2">
247
+ <Clock className="h-5 w-5 mt-0.5 text-gray-500" />
248
+ <div className="space-y-2 flex-1">
249
+ <p className="font-medium">Important Deadlines</p>
250
+ <div className="text-sm text-gray-500 space-y-2">
251
+ {conference.abstract_deadline && (
252
+ <div className="bg-gray-100 rounded-md p-2">
253
+ <p>Abstract: {formatDeadlineDate(conference.abstract_deadline)}</p>
254
+ </div>
255
+ )}
256
+ <div className="bg-gray-100 rounded-md p-2">
257
+ <p>Submission: {formatDeadlineDate(conference.deadline)}</p>
258
+ </div>
259
+ {conference.commitment_deadline && (
260
+ <div className="bg-gray-100 rounded-md p-2">
261
+ <p>Commitment: {formatDeadlineDate(conference.commitment_deadline)}</p>
262
+ </div>
263
+ )}
264
+ {conference.review_release_date && (
265
+ <div className="bg-gray-100 rounded-md p-2">
266
+ <p>Reviews Released: {formatDeadlineDate(conference.review_release_date)}</p>
267
+ </div>
268
+ )}
269
+ {(conference.rebuttal_period_start || conference.rebuttal_period_end) && (
270
+ <div className="bg-gray-100 rounded-md p-2">
271
+ <p>Rebuttal Period: {formatDeadlineDate(conference.rebuttal_period_start)} - {formatDeadlineDate(conference.rebuttal_period_end)}</p>
272
+ </div>
273
+ )}
274
+ {conference.final_decision_date && (
275
+ <div className="bg-gray-100 rounded-md p-2">
276
+ <p>Final Decision: {formatDeadlineDate(conference.final_decision_date)}</p>
277
+ </div>
278
+ )}
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <div className="flex items-center">
285
+ <AlarmClock className={`h-5 w-5 mr-3 flex-shrink-0 ${getCountdownColor()}`} />
286
+ <div>
287
+ <span className={`font-medium ${getCountdownColor()}`}>
288
+ {countdown}
289
+ </span>
290
+ {formatDeadlineDisplay()}
291
+ </div>
292
+ </div>
293
+
294
+ {Array.isArray(conference.tags) && conference.tags.length > 0 && (
295
+ <div className="flex flex-wrap gap-2">
296
+ {conference.tags.map((tag) => (
297
+ <span key={tag} className="tag">
298
+ <Tag className="h-3 w-3 mr-1" />
299
+ {tag}
300
+ </span>
301
+ ))}
302
+ </div>
303
+ )}
304
+
305
+ {conference.note && (
306
+ <div
307
+ className="text-sm text-neutral-600 mt-2 p-3 bg-neutral-50 rounded-lg"
308
+ dangerouslySetInnerHTML={{
309
+ __html: conference.note.replace(
310
+ /<a(.*?)>/g,
311
+ '<a$1 style="color: #3b82f6; font-weight: 500; text-decoration: underline; text-underline-offset: 2px;">'
312
+ )
313
+ }}
314
+ />
315
+ )}
316
+
317
+ <div className="flex items-center justify-between pt-2">
318
+ {conference.link && (
319
+ <Button
320
+ variant="ghost"
321
+ size="sm"
322
+ className="text-base text-primary hover:underline p-0"
323
+ asChild
324
+ >
325
+ <a
326
+ href={conference.link}
327
+ target="_blank"
328
+ rel="noopener noreferrer"
329
+ >
330
+ Visit website
331
+ </a>
332
+ </Button>
333
+ )}
334
+
335
+ <DropdownMenu>
336
+ <DropdownMenuTrigger asChild>
337
+ <Button
338
+ variant="ghost"
339
+ size="sm"
340
+ className="text-sm focus-visible:ring-0 focus:outline-none"
341
+ >
342
+ <CalendarPlus className="h-4 w-4 mr-2" />
343
+ Add to Calendar
344
+ </Button>
345
+ </DropdownMenuTrigger>
346
+ <DropdownMenuContent className="bg-white" align="end">
347
+ <DropdownMenuItem
348
+ className="text-neutral-800 hover:bg-neutral-100"
349
+ onClick={() => createCalendarEvent('google')}
350
+ >
351
+ Add to Google Calendar
352
+ </DropdownMenuItem>
353
+ <DropdownMenuItem
354
+ className="text-neutral-800 hover:bg-neutral-100"
355
+ onClick={() => createCalendarEvent('apple')}
356
+ >
357
+ Add to Apple Calendar
358
+ </DropdownMenuItem>
359
+ </DropdownMenuContent>
360
+ </DropdownMenu>
361
+ </div>
362
+ </div>
363
+ </DialogContent>
364
+ </Dialog>
365
+ );
366
+ };
367
+
368
+ export default ConferenceDialog;
src/components/ConferenceList.tsx ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ import { sortConferencesByDeadline } from "@/utils/conferenceUtils";
2
+
3
+ // When loading the conferences:
4
+ const sortedConferences = sortConferencesByDeadline(conferences);
src/components/CountdownTimer.tsx ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { useCountdown } from '@/hooks/useCountdown';
2
+
3
+ interface CountdownTimerProps {
4
+ deadline: Date | null;
5
+ className?: string;
6
+ }
7
+
8
+ const CountdownTimer = ({ deadline, className = "" }: CountdownTimerProps) => {
9
+ const { days, hours, minutes, seconds, isExpired } = useCountdown(deadline);
10
+
11
+ if (isExpired || !deadline) {
12
+ return (
13
+ <div className={`text-red-600 font-medium ${className}`}>
14
+ Deadline passed
15
+ </div>
16
+ );
17
+ }
18
+
19
+ const formatNumber = (num: number) => num.toString().padStart(2, '0');
20
+
21
+ return (
22
+ <div className={`font-mono text-lg font-bold ${className}`}>
23
+ <span className="text-blue-600">
24
+ {days > 0 && `${days} day${days !== 1 ? 's' : ''} `}
25
+ {formatNumber(hours)}h {formatNumber(minutes)}m {formatNumber(seconds)}s
26
+ </span>
27
+ </div>
28
+ );
29
+ };
30
+
31
+ export default CountdownTimer;
src/components/FilterBar.tsx ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { useMemo } from "react";
2
+ import conferencesData from "@/data/conferences.yml";
3
+ import { X, ChevronRight, Filter } from "lucide-react";
4
+ import { getAllCountries } from "@/utils/countryExtractor";
5
+ import {
6
+ Popover,
7
+ PopoverContent,
8
+ PopoverTrigger,
9
+ } from "@/components/ui/popover";
10
+ import { Button } from "@/components/ui/button";
11
+ import { Checkbox } from "@/components/ui/checkbox";
12
+ import { Conference } from "@/types/conference";
13
+
14
+ interface FilterBarProps {
15
+ selectedTags: Set<string>;
16
+ selectedCountries: Set<string>;
17
+ onTagSelect: (tags: Set<string>) => void;
18
+ onCountrySelect: (countries: Set<string>) => void;
19
+ }
20
+
21
+ const FilterBar = ({
22
+ selectedTags = new Set(),
23
+ selectedCountries = new Set(),
24
+ onTagSelect,
25
+ onCountrySelect
26
+ }: FilterBarProps) => {
27
+ const uniqueTags = useMemo(() => {
28
+ const tags = new Set<string>();
29
+ if (Array.isArray(conferencesData)) {
30
+ conferencesData.forEach(conf => {
31
+ if (Array.isArray(conf.tags)) {
32
+ conf.tags.forEach(tag => tags.add(tag));
33
+ }
34
+ });
35
+ }
36
+ return Array.from(tags).map(tag => ({
37
+ id: tag,
38
+ label: tag.split("-").map(word =>
39
+ word.charAt(0).toUpperCase() + word.slice(1)
40
+ ).join(" "),
41
+ description: `${tag} Conferences`
42
+ }));
43
+ }, []);
44
+
45
+ const isTagSelected = (tagId: string) => {
46
+ return selectedTags?.has(tagId) ?? false;
47
+ };
48
+
49
+ const handleTagChange = (tagId: string) => {
50
+ const newSelectedTags = new Set(selectedTags);
51
+ if (newSelectedTags.has(tagId)) {
52
+ newSelectedTags.delete(tagId);
53
+ } else {
54
+ newSelectedTags.add(tagId);
55
+ }
56
+ onTagSelect(newSelectedTags);
57
+ };
58
+
59
+ const clearAllFilters = () => {
60
+ onTagSelect(new Set());
61
+ onCountrySelect(new Set());
62
+ };
63
+
64
+ return (
65
+ <div className="bg-white shadow rounded-lg p-4">
66
+ <div className="flex flex-col space-y-4">
67
+ <div className="flex flex-wrap items-center gap-2">
68
+ <Popover>
69
+ <PopoverTrigger asChild>
70
+ <Button variant="outline" size="sm" className="h-8 gap-1">
71
+ <Filter className="h-4 w-4" />
72
+ Filter by Tag
73
+ </Button>
74
+ </PopoverTrigger>
75
+ <PopoverContent className="w-80 p-4" align="start">
76
+ <div className="space-y-4">
77
+ <div>
78
+ <div className="flex items-center justify-between mb-4">
79
+ <h4 className="text-sm font-medium text-gray-800">Tags</h4>
80
+ <ChevronRight className="h-4 w-4 text-gray-500" />
81
+ </div>
82
+ <div className="max-h-60 overflow-y-auto space-y-2">
83
+ {uniqueTags.map(tag => (
84
+ <div key={tag.id} className="flex items-center space-x-2 hover:bg-gray-50 p-1 rounded">
85
+ <Checkbox
86
+ id={`tag-${tag.id}`}
87
+ checked={isTagSelected(tag.id)}
88
+ onCheckedChange={() => handleTagChange(tag.id)}
89
+ />
90
+ <label
91
+ htmlFor={`tag-${tag.id}`}
92
+ className="text-sm font-medium text-gray-700 cursor-pointer w-full py-1"
93
+ >
94
+ {tag.label}
95
+ </label>
96
+ </div>
97
+ ))}
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </PopoverContent>
102
+ </Popover>
103
+
104
+ {/* Clear all filters button */}
105
+ {(selectedTags.size > 0 || selectedCountries.size > 0) && (
106
+ <Button
107
+ variant="ghost"
108
+ size="sm"
109
+ onClick={clearAllFilters}
110
+ className="text-neutral-500 hover:text-neutral-700"
111
+ >
112
+ Clear all
113
+ </Button>
114
+ )}
115
+
116
+ {/* Display selected tags */}
117
+ {Array.from(selectedTags).map(tag => (
118
+ <button
119
+ key={tag}
120
+ className="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800 hover:bg-blue-200 font-medium"
121
+ onClick={() => handleTagChange(tag)}
122
+ >
123
+ {tag.split("-").map(word =>
124
+ word.charAt(0).toUpperCase() + word.slice(1)
125
+ ).join(" ")}
126
+ <X className="ml-1 h-3 w-3" />
127
+ </button>
128
+ ))}
129
+ </div>
130
+ </div>
131
+ </div>
132
+ );
133
+ };
134
+
135
+ export default FilterBar;
src/components/Header.tsx ADDED
@@ -0,0 +1,123 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { Search } from "lucide-react";
2
+ import { Input } from "@/components/ui/input";
3
+ import { Link } from "react-router-dom";
4
+ import { CalendarDays } from "lucide-react";
5
+
6
+ interface HeaderProps {
7
+ onSearch: (query: string) => void;
8
+ showEmptyMessage?: boolean;
9
+ }
10
+
11
+ const Header = ({ onSearch, showEmptyMessage = false }: HeaderProps) => {
12
+ return (
13
+ <header className="bg-white border-b border-neutral-200">
14
+ <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
15
+ <div className="flex flex-col md:flex-row md:items-center md:justify-between md:h-16 py-4 md:py-0 gap-4 md:gap-0">
16
+ <div className="flex items-center justify-center md:justify-start w-full md:w-auto gap-8">
17
+ <Link to="/" className="flex items-center gap-2">
18
+ <img
19
+ src="https://huggingface.co/front/assets/huggingface_logo.svg"
20
+ alt="Hugging Face Logo"
21
+ className="h-8 w-8"
22
+ />
23
+ <span className="text-2xl font-bold text-primary">
24
+ <span className="hidden md:inline">AI Conference Deadlines</span>
25
+ <span className="md:hidden">AI Deadlines</span>
26
+ </span>
27
+ </Link>
28
+ <nav className="hidden md:flex space-x-4">
29
+ <Link
30
+ to="/calendar"
31
+ className="text-neutral-600 hover:text-primary flex items-center gap-2"
32
+ >
33
+ <CalendarDays className="h-5 w-5" />
34
+ Calendar
35
+ </Link>
36
+ </nav>
37
+ </div>
38
+ <div className="w-full md:max-w-lg lg:max-w-xs">
39
+ <div className="relative">
40
+ <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
41
+ <Search className="h-5 w-5 text-neutral-400" />
42
+ </div>
43
+ <Input
44
+ type="search"
45
+ placeholder="Search conferences..."
46
+ className="pl-10 w-full"
47
+ onChange={(e) => onSearch(e.target.value)}
48
+ />
49
+ </div>
50
+ </div>
51
+ </div>
52
+ {showEmptyMessage && (
53
+ <div className="max-w-4xl mx-auto mt-2 mb-0 text-center">
54
+ <p className="text-sm bg-amber-50 text-amber-800 py-2 px-4 rounded-md inline-block">
55
+ There are no upcoming conferences for the selected categories - enable "Show past conferences" to see previous ones
56
+ </p>
57
+ </div>
58
+ )}
59
+ <div className="max-w-4xl mx-auto text-center">
60
+ <p className="text-sm text-neutral-600 py-4">
61
+ Countdowns to top CV/NLP/ML/Robotics/AI conference deadlines. To add/edit a conference, send in a{' '}
62
+ <a
63
+ href="https://github.com/huggingface/ai-deadlines"
64
+ target="_blank"
65
+ rel="noopener noreferrer"
66
+ className="text-primary hover:underline"
67
+ >
68
+ pull request
69
+ </a>.
70
+ <br />
71
+ P.S. Is your paper already on Arxiv? Feel free to{' '}
72
+ <a
73
+ href="https://hf.co/papers/submit"
74
+ target="_blank"
75
+ rel="noopener noreferrer"
76
+ className="text-primary hover:underline"
77
+ >
78
+ submit
79
+ </a>
80
+ {' '}it to{' '}
81
+ <a
82
+ href="https://hf.co/papers"
83
+ target="_blank"
84
+ rel="noopener noreferrer"
85
+ className="text-primary hover:underline"
86
+ >
87
+ hf.co/papers
88
+ </a>
89
+ {' '}and upload your artifacts such as{' '}
90
+ <a
91
+ href="https://huggingface.co/docs/hub/en/models-uploading"
92
+ target="_blank"
93
+ rel="noopener noreferrer"
94
+ className="text-primary hover:underline"
95
+ >
96
+ models
97
+ </a>
98
+ {', '}
99
+ <a
100
+ href="https://huggingface.co/docs/datasets/loading"
101
+ target="_blank"
102
+ rel="noopener noreferrer"
103
+ className="text-primary hover:underline"
104
+ >
105
+ datasets
106
+ </a>
107
+ {' '}and{' '}
108
+ <a
109
+ href="https://huggingface.co/docs/hub/en/spaces-sdks-gradio"
110
+ target="_blank"
111
+ rel="noopener noreferrer"
112
+ className="text-primary hover:underline"
113
+ >
114
+ demos
115
+ </a>
116
+ </p>
117
+ </div>
118
+ </div>
119
+ </header>
120
+ );
121
+ };
122
+
123
+ export default Header;
src/components/ui/accordion.tsx ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import * as AccordionPrimitive from "@radix-ui/react-accordion"
3
+ import { ChevronDown } from "lucide-react"
4
+
5
+ import { cn } from "@/lib/utils"
6
+
7
+ const Accordion = AccordionPrimitive.Root
8
+
9
+ const AccordionItem = React.forwardRef<
10
+ React.ElementRef<typeof AccordionPrimitive.Item>,
11
+ React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
12
+ >(({ className, ...props }, ref) => (
13
+ <AccordionPrimitive.Item
14
+ ref={ref}
15
+ className={cn("border-b", className)}
16
+ {...props}
17
+ />
18
+ ))
19
+ AccordionItem.displayName = "AccordionItem"
20
+
21
+ const AccordionTrigger = React.forwardRef<
22
+ React.ElementRef<typeof AccordionPrimitive.Trigger>,
23
+ React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
24
+ >(({ className, children, ...props }, ref) => (
25
+ <AccordionPrimitive.Header className="flex">
26
+ <AccordionPrimitive.Trigger
27
+ ref={ref}
28
+ className={cn(
29
+ "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
30
+ className
31
+ )}
32
+ {...props}
33
+ >
34
+ {children}
35
+ <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
36
+ </AccordionPrimitive.Trigger>
37
+ </AccordionPrimitive.Header>
38
+ ))
39
+ AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
40
+
41
+ const AccordionContent = React.forwardRef<
42
+ React.ElementRef<typeof AccordionPrimitive.Content>,
43
+ React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
44
+ >(({ className, children, ...props }, ref) => (
45
+ <AccordionPrimitive.Content
46
+ ref={ref}
47
+ className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
48
+ {...props}
49
+ >
50
+ <div className={cn("pb-4 pt-0", className)}>{children}</div>
51
+ </AccordionPrimitive.Content>
52
+ ))
53
+
54
+ AccordionContent.displayName = AccordionPrimitive.Content.displayName
55
+
56
+ export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
src/components/ui/alert-dialog.tsx ADDED
@@ -0,0 +1,139 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
3
+
4
+ import { cn } from "@/lib/utils"
5
+ import { buttonVariants } from "@/components/ui/button"
6
+
7
+ const AlertDialog = AlertDialogPrimitive.Root
8
+
9
+ const AlertDialogTrigger = AlertDialogPrimitive.Trigger
10
+
11
+ const AlertDialogPortal = AlertDialogPrimitive.Portal
12
+
13
+ const AlertDialogOverlay = React.forwardRef<
14
+ React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
15
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
16
+ >(({ className, ...props }, ref) => (
17
+ <AlertDialogPrimitive.Overlay
18
+ className={cn(
19
+ "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
20
+ className
21
+ )}
22
+ {...props}
23
+ ref={ref}
24
+ />
25
+ ))
26
+ AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
27
+
28
+ const AlertDialogContent = React.forwardRef<
29
+ React.ElementRef<typeof AlertDialogPrimitive.Content>,
30
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
31
+ >(({ className, ...props }, ref) => (
32
+ <AlertDialogPortal>
33
+ <AlertDialogOverlay />
34
+ <AlertDialogPrimitive.Content
35
+ ref={ref}
36
+ className={cn(
37
+ "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
38
+ className
39
+ )}
40
+ {...props}
41
+ />
42
+ </AlertDialogPortal>
43
+ ))
44
+ AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
45
+
46
+ const AlertDialogHeader = ({
47
+ className,
48
+ ...props
49
+ }: React.HTMLAttributes<HTMLDivElement>) => (
50
+ <div
51
+ className={cn(
52
+ "flex flex-col space-y-2 text-center sm:text-left",
53
+ className
54
+ )}
55
+ {...props}
56
+ />
57
+ )
58
+ AlertDialogHeader.displayName = "AlertDialogHeader"
59
+
60
+ const AlertDialogFooter = ({
61
+ className,
62
+ ...props
63
+ }: React.HTMLAttributes<HTMLDivElement>) => (
64
+ <div
65
+ className={cn(
66
+ "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
67
+ className
68
+ )}
69
+ {...props}
70
+ />
71
+ )
72
+ AlertDialogFooter.displayName = "AlertDialogFooter"
73
+
74
+ const AlertDialogTitle = React.forwardRef<
75
+ React.ElementRef<typeof AlertDialogPrimitive.Title>,
76
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
77
+ >(({ className, ...props }, ref) => (
78
+ <AlertDialogPrimitive.Title
79
+ ref={ref}
80
+ className={cn("text-lg font-semibold", className)}
81
+ {...props}
82
+ />
83
+ ))
84
+ AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
85
+
86
+ const AlertDialogDescription = React.forwardRef<
87
+ React.ElementRef<typeof AlertDialogPrimitive.Description>,
88
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
89
+ >(({ className, ...props }, ref) => (
90
+ <AlertDialogPrimitive.Description
91
+ ref={ref}
92
+ className={cn("text-sm text-muted-foreground", className)}
93
+ {...props}
94
+ />
95
+ ))
96
+ AlertDialogDescription.displayName =
97
+ AlertDialogPrimitive.Description.displayName
98
+
99
+ const AlertDialogAction = React.forwardRef<
100
+ React.ElementRef<typeof AlertDialogPrimitive.Action>,
101
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
102
+ >(({ className, ...props }, ref) => (
103
+ <AlertDialogPrimitive.Action
104
+ ref={ref}
105
+ className={cn(buttonVariants(), className)}
106
+ {...props}
107
+ />
108
+ ))
109
+ AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
110
+
111
+ const AlertDialogCancel = React.forwardRef<
112
+ React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
113
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
114
+ >(({ className, ...props }, ref) => (
115
+ <AlertDialogPrimitive.Cancel
116
+ ref={ref}
117
+ className={cn(
118
+ buttonVariants({ variant: "outline" }),
119
+ "mt-2 sm:mt-0",
120
+ className
121
+ )}
122
+ {...props}
123
+ />
124
+ ))
125
+ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
126
+
127
+ export {
128
+ AlertDialog,
129
+ AlertDialogPortal,
130
+ AlertDialogOverlay,
131
+ AlertDialogTrigger,
132
+ AlertDialogContent,
133
+ AlertDialogHeader,
134
+ AlertDialogFooter,
135
+ AlertDialogTitle,
136
+ AlertDialogDescription,
137
+ AlertDialogAction,
138
+ AlertDialogCancel,
139
+ }
src/components/ui/alert.tsx ADDED
@@ -0,0 +1,59 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import { cva, type VariantProps } from "class-variance-authority"
3
+
4
+ import { cn } from "@/lib/utils"
5
+
6
+ const alertVariants = cva(
7
+ "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
8
+ {
9
+ variants: {
10
+ variant: {
11
+ default: "bg-background text-foreground",
12
+ destructive:
13
+ "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14
+ },
15
+ },
16
+ defaultVariants: {
17
+ variant: "default",
18
+ },
19
+ }
20
+ )
21
+
22
+ const Alert = React.forwardRef<
23
+ HTMLDivElement,
24
+ React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25
+ >(({ className, variant, ...props }, ref) => (
26
+ <div
27
+ ref={ref}
28
+ role="alert"
29
+ className={cn(alertVariants({ variant }), className)}
30
+ {...props}
31
+ />
32
+ ))
33
+ Alert.displayName = "Alert"
34
+
35
+ const AlertTitle = React.forwardRef<
36
+ HTMLParagraphElement,
37
+ React.HTMLAttributes<HTMLHeadingElement>
38
+ >(({ className, ...props }, ref) => (
39
+ <h5
40
+ ref={ref}
41
+ className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42
+ {...props}
43
+ />
44
+ ))
45
+ AlertTitle.displayName = "AlertTitle"
46
+
47
+ const AlertDescription = React.forwardRef<
48
+ HTMLParagraphElement,
49
+ React.HTMLAttributes<HTMLParagraphElement>
50
+ >(({ className, ...props }, ref) => (
51
+ <div
52
+ ref={ref}
53
+ className={cn("text-sm [&_p]:leading-relaxed", className)}
54
+ {...props}
55
+ />
56
+ ))
57
+ AlertDescription.displayName = "AlertDescription"
58
+
59
+ export { Alert, AlertTitle, AlertDescription }
src/components/ui/aspect-ratio.tsx ADDED
@@ -0,0 +1,5 @@
 
 
 
 
 
 
1
+ import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
2
+
3
+ const AspectRatio = AspectRatioPrimitive.Root
4
+
5
+ export { AspectRatio }
src/components/ui/avatar.tsx ADDED
@@ -0,0 +1,48 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import * as AvatarPrimitive from "@radix-ui/react-avatar"
3
+
4
+ import { cn } from "@/lib/utils"
5
+
6
+ const Avatar = React.forwardRef<
7
+ React.ElementRef<typeof AvatarPrimitive.Root>,
8
+ React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
9
+ >(({ className, ...props }, ref) => (
10
+ <AvatarPrimitive.Root
11
+ ref={ref}
12
+ className={cn(
13
+ "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
14
+ className
15
+ )}
16
+ {...props}
17
+ />
18
+ ))
19
+ Avatar.displayName = AvatarPrimitive.Root.displayName
20
+
21
+ const AvatarImage = React.forwardRef<
22
+ React.ElementRef<typeof AvatarPrimitive.Image>,
23
+ React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
24
+ >(({ className, ...props }, ref) => (
25
+ <AvatarPrimitive.Image
26
+ ref={ref}
27
+ className={cn("aspect-square h-full w-full", className)}
28
+ {...props}
29
+ />
30
+ ))
31
+ AvatarImage.displayName = AvatarPrimitive.Image.displayName
32
+
33
+ const AvatarFallback = React.forwardRef<
34
+ React.ElementRef<typeof AvatarPrimitive.Fallback>,
35
+ React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
36
+ >(({ className, ...props }, ref) => (
37
+ <AvatarPrimitive.Fallback
38
+ ref={ref}
39
+ className={cn(
40
+ "flex h-full w-full items-center justify-center rounded-full bg-muted",
41
+ className
42
+ )}
43
+ {...props}
44
+ />
45
+ ))
46
+ AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
47
+
48
+ export { Avatar, AvatarImage, AvatarFallback }
src/components/ui/badge.tsx ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import { cva, type VariantProps } from "class-variance-authority"
3
+
4
+ import { cn } from "@/lib/utils"
5
+
6
+ const badgeVariants = cva(
7
+ "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
8
+ {
9
+ variants: {
10
+ variant: {
11
+ default:
12
+ "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13
+ secondary:
14
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15
+ destructive:
16
+ "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17
+ outline: "text-foreground",
18
+ },
19
+ },
20
+ defaultVariants: {
21
+ variant: "default",
22
+ },
23
+ }
24
+ )
25
+
26
+ export interface BadgeProps
27
+ extends React.HTMLAttributes<HTMLDivElement>,
28
+ VariantProps<typeof badgeVariants> {}
29
+
30
+ function Badge({ className, variant, ...props }: BadgeProps) {
31
+ return (
32
+ <div className={cn(badgeVariants({ variant }), className)} {...props} />
33
+ )
34
+ }
35
+
36
+ export { Badge, badgeVariants }
src/components/ui/breadcrumb.tsx ADDED
@@ -0,0 +1,115 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import { Slot } from "@radix-ui/react-slot"
3
+ import { ChevronRight, MoreHorizontal } from "lucide-react"
4
+
5
+ import { cn } from "@/lib/utils"
6
+
7
+ const Breadcrumb = React.forwardRef<
8
+ HTMLElement,
9
+ React.ComponentPropsWithoutRef<"nav"> & {
10
+ separator?: React.ReactNode
11
+ }
12
+ >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
13
+ Breadcrumb.displayName = "Breadcrumb"
14
+
15
+ const BreadcrumbList = React.forwardRef<
16
+ HTMLOListElement,
17
+ React.ComponentPropsWithoutRef<"ol">
18
+ >(({ className, ...props }, ref) => (
19
+ <ol
20
+ ref={ref}
21
+ className={cn(
22
+ "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
23
+ className
24
+ )}
25
+ {...props}
26
+ />
27
+ ))
28
+ BreadcrumbList.displayName = "BreadcrumbList"
29
+
30
+ const BreadcrumbItem = React.forwardRef<
31
+ HTMLLIElement,
32
+ React.ComponentPropsWithoutRef<"li">
33
+ >(({ className, ...props }, ref) => (
34
+ <li
35
+ ref={ref}
36
+ className={cn("inline-flex items-center gap-1.5", className)}
37
+ {...props}
38
+ />
39
+ ))
40
+ BreadcrumbItem.displayName = "BreadcrumbItem"
41
+
42
+ const BreadcrumbLink = React.forwardRef<
43
+ HTMLAnchorElement,
44
+ React.ComponentPropsWithoutRef<"a"> & {
45
+ asChild?: boolean
46
+ }
47
+ >(({ asChild, className, ...props }, ref) => {
48
+ const Comp = asChild ? Slot : "a"
49
+
50
+ return (
51
+ <Comp
52
+ ref={ref}
53
+ className={cn("transition-colors hover:text-foreground", className)}
54
+ {...props}
55
+ />
56
+ )
57
+ })
58
+ BreadcrumbLink.displayName = "BreadcrumbLink"
59
+
60
+ const BreadcrumbPage = React.forwardRef<
61
+ HTMLSpanElement,
62
+ React.ComponentPropsWithoutRef<"span">
63
+ >(({ className, ...props }, ref) => (
64
+ <span
65
+ ref={ref}
66
+ role="link"
67
+ aria-disabled="true"
68
+ aria-current="page"
69
+ className={cn("font-normal text-foreground", className)}
70
+ {...props}
71
+ />
72
+ ))
73
+ BreadcrumbPage.displayName = "BreadcrumbPage"
74
+
75
+ const BreadcrumbSeparator = ({
76
+ children,
77
+ className,
78
+ ...props
79
+ }: React.ComponentProps<"li">) => (
80
+ <li
81
+ role="presentation"
82
+ aria-hidden="true"
83
+ className={cn("[&>svg]:size-3.5", className)}
84
+ {...props}
85
+ >
86
+ {children ?? <ChevronRight />}
87
+ </li>
88
+ )
89
+ BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
90
+
91
+ const BreadcrumbEllipsis = ({
92
+ className,
93
+ ...props
94
+ }: React.ComponentProps<"span">) => (
95
+ <span
96
+ role="presentation"
97
+ aria-hidden="true"
98
+ className={cn("flex h-9 w-9 items-center justify-center", className)}
99
+ {...props}
100
+ >
101
+ <MoreHorizontal className="h-4 w-4" />
102
+ <span className="sr-only">More</span>
103
+ </span>
104
+ )
105
+ BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
106
+
107
+ export {
108
+ Breadcrumb,
109
+ BreadcrumbList,
110
+ BreadcrumbItem,
111
+ BreadcrumbLink,
112
+ BreadcrumbPage,
113
+ BreadcrumbSeparator,
114
+ BreadcrumbEllipsis,
115
+ }
src/components/ui/button.tsx ADDED
@@ -0,0 +1,56 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import { Slot } from "@radix-ui/react-slot"
3
+ import { cva, type VariantProps } from "class-variance-authority"
4
+
5
+ import { cn } from "@/lib/utils"
6
+
7
+ const buttonVariants = cva(
8
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
9
+ {
10
+ variants: {
11
+ variant: {
12
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
13
+ destructive:
14
+ "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15
+ outline:
16
+ "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17
+ secondary:
18
+ "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19
+ ghost: "hover:bg-accent hover:text-accent-foreground",
20
+ link: "text-primary underline-offset-4 hover:underline",
21
+ },
22
+ size: {
23
+ default: "h-10 px-4 py-2",
24
+ sm: "h-9 rounded-md px-3",
25
+ lg: "h-11 rounded-md px-8",
26
+ icon: "h-10 w-10",
27
+ },
28
+ },
29
+ defaultVariants: {
30
+ variant: "default",
31
+ size: "default",
32
+ },
33
+ }
34
+ )
35
+
36
+ export interface ButtonProps
37
+ extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38
+ VariantProps<typeof buttonVariants> {
39
+ asChild?: boolean
40
+ }
41
+
42
+ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
44
+ const Comp = asChild ? Slot : "button"
45
+ return (
46
+ <Comp
47
+ className={cn(buttonVariants({ variant, size, className }))}
48
+ ref={ref}
49
+ {...props}
50
+ />
51
+ )
52
+ }
53
+ )
54
+ Button.displayName = "Button"
55
+
56
+ export { Button, buttonVariants }
src/components/ui/calendar.tsx ADDED
@@ -0,0 +1,63 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react";
2
+ import { ChevronLeft, ChevronRight } from "lucide-react";
3
+ import { DayPicker } from "react-day-picker";
4
+
5
+ import { cn } from "@/lib/utils";
6
+ import { buttonVariants } from "@/components/ui/button";
7
+
8
+ export type CalendarProps = React.ComponentProps<typeof DayPicker>;
9
+
10
+ function Calendar({
11
+ className,
12
+ classNames,
13
+ showOutsideDays = false,
14
+ ...props
15
+ }: CalendarProps) {
16
+ return (
17
+ <DayPicker
18
+ showOutsideDays={showOutsideDays}
19
+ className={cn("p-3 mx-auto", className)}
20
+ classNames={{
21
+ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 justify-center",
22
+ month: "space-y-4",
23
+ caption: "flex justify-center pt-1 relative items-center",
24
+ caption_label: "text-sm font-medium",
25
+ nav: "space-x-1 flex items-center",
26
+ nav_button: cn(
27
+ buttonVariants({ variant: "outline" }),
28
+ "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
29
+ ),
30
+ nav_button_previous: "absolute left-1",
31
+ nav_button_next: "absolute right-1",
32
+ table: "w-full border-collapse space-y-1",
33
+ head_row: "flex",
34
+ head_cell:
35
+ "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
36
+ row: "flex w-full mt-2",
37
+ cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
38
+ day: cn(
39
+ buttonVariants({ variant: "ghost" }),
40
+ "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
41
+ ),
42
+ day_range_end: "day-range-end",
43
+ day_selected:
44
+ "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
45
+ day_today: "bg-accent text-accent-foreground",
46
+ day_outside: "opacity-0 pointer-events-none hidden",
47
+ day_disabled: "text-muted-foreground opacity-50",
48
+ day_range_middle:
49
+ "aria-selected:bg-accent aria-selected:text-accent-foreground",
50
+ day_hidden: "invisible",
51
+ ...classNames,
52
+ }}
53
+ components={{
54
+ IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
55
+ IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
56
+ }}
57
+ {...props}
58
+ />
59
+ );
60
+ }
61
+ Calendar.displayName = "Calendar";
62
+
63
+ export { Calendar };
src/components/ui/card.tsx ADDED
@@ -0,0 +1,79 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+
3
+ import { cn } from "@/lib/utils"
4
+
5
+ const Card = React.forwardRef<
6
+ HTMLDivElement,
7
+ React.HTMLAttributes<HTMLDivElement>
8
+ >(({ className, ...props }, ref) => (
9
+ <div
10
+ ref={ref}
11
+ className={cn(
12
+ "rounded-lg border bg-card text-card-foreground shadow-sm",
13
+ className
14
+ )}
15
+ {...props}
16
+ />
17
+ ))
18
+ Card.displayName = "Card"
19
+
20
+ const CardHeader = React.forwardRef<
21
+ HTMLDivElement,
22
+ React.HTMLAttributes<HTMLDivElement>
23
+ >(({ className, ...props }, ref) => (
24
+ <div
25
+ ref={ref}
26
+ className={cn("flex flex-col space-y-1.5 p-6", className)}
27
+ {...props}
28
+ />
29
+ ))
30
+ CardHeader.displayName = "CardHeader"
31
+
32
+ const CardTitle = React.forwardRef<
33
+ HTMLParagraphElement,
34
+ React.HTMLAttributes<HTMLHeadingElement>
35
+ >(({ className, ...props }, ref) => (
36
+ <h3
37
+ ref={ref}
38
+ className={cn(
39
+ "text-2xl font-semibold leading-none tracking-tight",
40
+ className
41
+ )}
42
+ {...props}
43
+ />
44
+ ))
45
+ CardTitle.displayName = "CardTitle"
46
+
47
+ const CardDescription = React.forwardRef<
48
+ HTMLParagraphElement,
49
+ React.HTMLAttributes<HTMLParagraphElement>
50
+ >(({ className, ...props }, ref) => (
51
+ <p
52
+ ref={ref}
53
+ className={cn("text-sm text-muted-foreground", className)}
54
+ {...props}
55
+ />
56
+ ))
57
+ CardDescription.displayName = "CardDescription"
58
+
59
+ const CardContent = React.forwardRef<
60
+ HTMLDivElement,
61
+ React.HTMLAttributes<HTMLDivElement>
62
+ >(({ className, ...props }, ref) => (
63
+ <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64
+ ))
65
+ CardContent.displayName = "CardContent"
66
+
67
+ const CardFooter = React.forwardRef<
68
+ HTMLDivElement,
69
+ React.HTMLAttributes<HTMLDivElement>
70
+ >(({ className, ...props }, ref) => (
71
+ <div
72
+ ref={ref}
73
+ className={cn("flex items-center p-6 pt-0", className)}
74
+ {...props}
75
+ />
76
+ ))
77
+ CardFooter.displayName = "CardFooter"
78
+
79
+ export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
src/components/ui/carousel.tsx ADDED
@@ -0,0 +1,260 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import useEmblaCarousel, {
3
+ type UseEmblaCarouselType,
4
+ } from "embla-carousel-react"
5
+ import { ArrowLeft, ArrowRight } from "lucide-react"
6
+
7
+ import { cn } from "@/lib/utils"
8
+ import { Button } from "@/components/ui/button"
9
+
10
+ type CarouselApi = UseEmblaCarouselType[1]
11
+ type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
12
+ type CarouselOptions = UseCarouselParameters[0]
13
+ type CarouselPlugin = UseCarouselParameters[1]
14
+
15
+ type CarouselProps = {
16
+ opts?: CarouselOptions
17
+ plugins?: CarouselPlugin
18
+ orientation?: "horizontal" | "vertical"
19
+ setApi?: (api: CarouselApi) => void
20
+ }
21
+
22
+ type CarouselContextProps = {
23
+ carouselRef: ReturnType<typeof useEmblaCarousel>[0]
24
+ api: ReturnType<typeof useEmblaCarousel>[1]
25
+ scrollPrev: () => void
26
+ scrollNext: () => void
27
+ canScrollPrev: boolean
28
+ canScrollNext: boolean
29
+ } & CarouselProps
30
+
31
+ const CarouselContext = React.createContext<CarouselContextProps | null>(null)
32
+
33
+ function useCarousel() {
34
+ const context = React.useContext(CarouselContext)
35
+
36
+ if (!context) {
37
+ throw new Error("useCarousel must be used within a <Carousel />")
38
+ }
39
+
40
+ return context
41
+ }
42
+
43
+ const Carousel = React.forwardRef<
44
+ HTMLDivElement,
45
+ React.HTMLAttributes<HTMLDivElement> & CarouselProps
46
+ >(
47
+ (
48
+ {
49
+ orientation = "horizontal",
50
+ opts,
51
+ setApi,
52
+ plugins,
53
+ className,
54
+ children,
55
+ ...props
56
+ },
57
+ ref
58
+ ) => {
59
+ const [carouselRef, api] = useEmblaCarousel(
60
+ {
61
+ ...opts,
62
+ axis: orientation === "horizontal" ? "x" : "y",
63
+ },
64
+ plugins
65
+ )
66
+ const [canScrollPrev, setCanScrollPrev] = React.useState(false)
67
+ const [canScrollNext, setCanScrollNext] = React.useState(false)
68
+
69
+ const onSelect = React.useCallback((api: CarouselApi) => {
70
+ if (!api) {
71
+ return
72
+ }
73
+
74
+ setCanScrollPrev(api.canScrollPrev())
75
+ setCanScrollNext(api.canScrollNext())
76
+ }, [])
77
+
78
+ const scrollPrev = React.useCallback(() => {
79
+ api?.scrollPrev()
80
+ }, [api])
81
+
82
+ const scrollNext = React.useCallback(() => {
83
+ api?.scrollNext()
84
+ }, [api])
85
+
86
+ const handleKeyDown = React.useCallback(
87
+ (event: React.KeyboardEvent<HTMLDivElement>) => {
88
+ if (event.key === "ArrowLeft") {
89
+ event.preventDefault()
90
+ scrollPrev()
91
+ } else if (event.key === "ArrowRight") {
92
+ event.preventDefault()
93
+ scrollNext()
94
+ }
95
+ },
96
+ [scrollPrev, scrollNext]
97
+ )
98
+
99
+ React.useEffect(() => {
100
+ if (!api || !setApi) {
101
+ return
102
+ }
103
+
104
+ setApi(api)
105
+ }, [api, setApi])
106
+
107
+ React.useEffect(() => {
108
+ if (!api) {
109
+ return
110
+ }
111
+
112
+ onSelect(api)
113
+ api.on("reInit", onSelect)
114
+ api.on("select", onSelect)
115
+
116
+ return () => {
117
+ api?.off("select", onSelect)
118
+ }
119
+ }, [api, onSelect])
120
+
121
+ return (
122
+ <CarouselContext.Provider
123
+ value={{
124
+ carouselRef,
125
+ api: api,
126
+ opts,
127
+ orientation:
128
+ orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
129
+ scrollPrev,
130
+ scrollNext,
131
+ canScrollPrev,
132
+ canScrollNext,
133
+ }}
134
+ >
135
+ <div
136
+ ref={ref}
137
+ onKeyDownCapture={handleKeyDown}
138
+ className={cn("relative", className)}
139
+ role="region"
140
+ aria-roledescription="carousel"
141
+ {...props}
142
+ >
143
+ {children}
144
+ </div>
145
+ </CarouselContext.Provider>
146
+ )
147
+ }
148
+ )
149
+ Carousel.displayName = "Carousel"
150
+
151
+ const CarouselContent = React.forwardRef<
152
+ HTMLDivElement,
153
+ React.HTMLAttributes<HTMLDivElement>
154
+ >(({ className, ...props }, ref) => {
155
+ const { carouselRef, orientation } = useCarousel()
156
+
157
+ return (
158
+ <div ref={carouselRef} className="overflow-hidden">
159
+ <div
160
+ ref={ref}
161
+ className={cn(
162
+ "flex",
163
+ orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
164
+ className
165
+ )}
166
+ {...props}
167
+ />
168
+ </div>
169
+ )
170
+ })
171
+ CarouselContent.displayName = "CarouselContent"
172
+
173
+ const CarouselItem = React.forwardRef<
174
+ HTMLDivElement,
175
+ React.HTMLAttributes<HTMLDivElement>
176
+ >(({ className, ...props }, ref) => {
177
+ const { orientation } = useCarousel()
178
+
179
+ return (
180
+ <div
181
+ ref={ref}
182
+ role="group"
183
+ aria-roledescription="slide"
184
+ className={cn(
185
+ "min-w-0 shrink-0 grow-0 basis-full",
186
+ orientation === "horizontal" ? "pl-4" : "pt-4",
187
+ className
188
+ )}
189
+ {...props}
190
+ />
191
+ )
192
+ })
193
+ CarouselItem.displayName = "CarouselItem"
194
+
195
+ const CarouselPrevious = React.forwardRef<
196
+ HTMLButtonElement,
197
+ React.ComponentProps<typeof Button>
198
+ >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
199
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel()
200
+
201
+ return (
202
+ <Button
203
+ ref={ref}
204
+ variant={variant}
205
+ size={size}
206
+ className={cn(
207
+ "absolute h-8 w-8 rounded-full",
208
+ orientation === "horizontal"
209
+ ? "-left-12 top-1/2 -translate-y-1/2"
210
+ : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
211
+ className
212
+ )}
213
+ disabled={!canScrollPrev}
214
+ onClick={scrollPrev}
215
+ {...props}
216
+ >
217
+ <ArrowLeft className="h-4 w-4" />
218
+ <span className="sr-only">Previous slide</span>
219
+ </Button>
220
+ )
221
+ })
222
+ CarouselPrevious.displayName = "CarouselPrevious"
223
+
224
+ const CarouselNext = React.forwardRef<
225
+ HTMLButtonElement,
226
+ React.ComponentProps<typeof Button>
227
+ >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
228
+ const { orientation, scrollNext, canScrollNext } = useCarousel()
229
+
230
+ return (
231
+ <Button
232
+ ref={ref}
233
+ variant={variant}
234
+ size={size}
235
+ className={cn(
236
+ "absolute h-8 w-8 rounded-full",
237
+ orientation === "horizontal"
238
+ ? "-right-12 top-1/2 -translate-y-1/2"
239
+ : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
240
+ className
241
+ )}
242
+ disabled={!canScrollNext}
243
+ onClick={scrollNext}
244
+ {...props}
245
+ >
246
+ <ArrowRight className="h-4 w-4" />
247
+ <span className="sr-only">Next slide</span>
248
+ </Button>
249
+ )
250
+ })
251
+ CarouselNext.displayName = "CarouselNext"
252
+
253
+ export {
254
+ type CarouselApi,
255
+ Carousel,
256
+ CarouselContent,
257
+ CarouselItem,
258
+ CarouselPrevious,
259
+ CarouselNext,
260
+ }
src/components/ui/chart.tsx ADDED
@@ -0,0 +1,363 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import * as RechartsPrimitive from "recharts"
3
+
4
+ import { cn } from "@/lib/utils"
5
+
6
+ // Format: { THEME_NAME: CSS_SELECTOR }
7
+ const THEMES = { light: "", dark: ".dark" } as const
8
+
9
+ export type ChartConfig = {
10
+ [k in string]: {
11
+ label?: React.ReactNode
12
+ icon?: React.ComponentType
13
+ } & (
14
+ | { color?: string; theme?: never }
15
+ | { color?: never; theme: Record<keyof typeof THEMES, string> }
16
+ )
17
+ }
18
+
19
+ type ChartContextProps = {
20
+ config: ChartConfig
21
+ }
22
+
23
+ const ChartContext = React.createContext<ChartContextProps | null>(null)
24
+
25
+ function useChart() {
26
+ const context = React.useContext(ChartContext)
27
+
28
+ if (!context) {
29
+ throw new Error("useChart must be used within a <ChartContainer />")
30
+ }
31
+
32
+ return context
33
+ }
34
+
35
+ const ChartContainer = React.forwardRef<
36
+ HTMLDivElement,
37
+ React.ComponentProps<"div"> & {
38
+ config: ChartConfig
39
+ children: React.ComponentProps<
40
+ typeof RechartsPrimitive.ResponsiveContainer
41
+ >["children"]
42
+ }
43
+ >(({ id, className, children, config, ...props }, ref) => {
44
+ const uniqueId = React.useId()
45
+ const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
46
+
47
+ return (
48
+ <ChartContext.Provider value={{ config }}>
49
+ <div
50
+ data-chart={chartId}
51
+ ref={ref}
52
+ className={cn(
53
+ "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
54
+ className
55
+ )}
56
+ {...props}
57
+ >
58
+ <ChartStyle id={chartId} config={config} />
59
+ <RechartsPrimitive.ResponsiveContainer>
60
+ {children}
61
+ </RechartsPrimitive.ResponsiveContainer>
62
+ </div>
63
+ </ChartContext.Provider>
64
+ )
65
+ })
66
+ ChartContainer.displayName = "Chart"
67
+
68
+ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
69
+ const colorConfig = Object.entries(config).filter(
70
+ ([_, config]) => config.theme || config.color
71
+ )
72
+
73
+ if (!colorConfig.length) {
74
+ return null
75
+ }
76
+
77
+ return (
78
+ <style
79
+ dangerouslySetInnerHTML={{
80
+ __html: Object.entries(THEMES)
81
+ .map(
82
+ ([theme, prefix]) => `
83
+ ${prefix} [data-chart=${id}] {
84
+ ${colorConfig
85
+ .map(([key, itemConfig]) => {
86
+ const color =
87
+ itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
88
+ itemConfig.color
89
+ return color ? ` --color-${key}: ${color};` : null
90
+ })
91
+ .join("\n")}
92
+ }
93
+ `
94
+ )
95
+ .join("\n"),
96
+ }}
97
+ />
98
+ )
99
+ }
100
+
101
+ const ChartTooltip = RechartsPrimitive.Tooltip
102
+
103
+ const ChartTooltipContent = React.forwardRef<
104
+ HTMLDivElement,
105
+ React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
106
+ React.ComponentProps<"div"> & {
107
+ hideLabel?: boolean
108
+ hideIndicator?: boolean
109
+ indicator?: "line" | "dot" | "dashed"
110
+ nameKey?: string
111
+ labelKey?: string
112
+ }
113
+ >(
114
+ (
115
+ {
116
+ active,
117
+ payload,
118
+ className,
119
+ indicator = "dot",
120
+ hideLabel = false,
121
+ hideIndicator = false,
122
+ label,
123
+ labelFormatter,
124
+ labelClassName,
125
+ formatter,
126
+ color,
127
+ nameKey,
128
+ labelKey,
129
+ },
130
+ ref
131
+ ) => {
132
+ const { config } = useChart()
133
+
134
+ const tooltipLabel = React.useMemo(() => {
135
+ if (hideLabel || !payload?.length) {
136
+ return null
137
+ }
138
+
139
+ const [item] = payload
140
+ const key = `${labelKey || item.dataKey || item.name || "value"}`
141
+ const itemConfig = getPayloadConfigFromPayload(config, item, key)
142
+ const value =
143
+ !labelKey && typeof label === "string"
144
+ ? config[label as keyof typeof config]?.label || label
145
+ : itemConfig?.label
146
+
147
+ if (labelFormatter) {
148
+ return (
149
+ <div className={cn("font-medium", labelClassName)}>
150
+ {labelFormatter(value, payload)}
151
+ </div>
152
+ )
153
+ }
154
+
155
+ if (!value) {
156
+ return null
157
+ }
158
+
159
+ return <div className={cn("font-medium", labelClassName)}>{value}</div>
160
+ }, [
161
+ label,
162
+ labelFormatter,
163
+ payload,
164
+ hideLabel,
165
+ labelClassName,
166
+ config,
167
+ labelKey,
168
+ ])
169
+
170
+ if (!active || !payload?.length) {
171
+ return null
172
+ }
173
+
174
+ const nestLabel = payload.length === 1 && indicator !== "dot"
175
+
176
+ return (
177
+ <div
178
+ ref={ref}
179
+ className={cn(
180
+ "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
181
+ className
182
+ )}
183
+ >
184
+ {!nestLabel ? tooltipLabel : null}
185
+ <div className="grid gap-1.5">
186
+ {payload.map((item, index) => {
187
+ const key = `${nameKey || item.name || item.dataKey || "value"}`
188
+ const itemConfig = getPayloadConfigFromPayload(config, item, key)
189
+ const indicatorColor = color || item.payload.fill || item.color
190
+
191
+ return (
192
+ <div
193
+ key={item.dataKey}
194
+ className={cn(
195
+ "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
196
+ indicator === "dot" && "items-center"
197
+ )}
198
+ >
199
+ {formatter && item?.value !== undefined && item.name ? (
200
+ formatter(item.value, item.name, item, index, item.payload)
201
+ ) : (
202
+ <>
203
+ {itemConfig?.icon ? (
204
+ <itemConfig.icon />
205
+ ) : (
206
+ !hideIndicator && (
207
+ <div
208
+ className={cn(
209
+ "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
210
+ {
211
+ "h-2.5 w-2.5": indicator === "dot",
212
+ "w-1": indicator === "line",
213
+ "w-0 border-[1.5px] border-dashed bg-transparent":
214
+ indicator === "dashed",
215
+ "my-0.5": nestLabel && indicator === "dashed",
216
+ }
217
+ )}
218
+ style={
219
+ {
220
+ "--color-bg": indicatorColor,
221
+ "--color-border": indicatorColor,
222
+ } as React.CSSProperties
223
+ }
224
+ />
225
+ )
226
+ )}
227
+ <div
228
+ className={cn(
229
+ "flex flex-1 justify-between leading-none",
230
+ nestLabel ? "items-end" : "items-center"
231
+ )}
232
+ >
233
+ <div className="grid gap-1.5">
234
+ {nestLabel ? tooltipLabel : null}
235
+ <span className="text-muted-foreground">
236
+ {itemConfig?.label || item.name}
237
+ </span>
238
+ </div>
239
+ {item.value && (
240
+ <span className="font-mono font-medium tabular-nums text-foreground">
241
+ {item.value.toLocaleString()}
242
+ </span>
243
+ )}
244
+ </div>
245
+ </>
246
+ )}
247
+ </div>
248
+ )
249
+ })}
250
+ </div>
251
+ </div>
252
+ )
253
+ }
254
+ )
255
+ ChartTooltipContent.displayName = "ChartTooltip"
256
+
257
+ const ChartLegend = RechartsPrimitive.Legend
258
+
259
+ const ChartLegendContent = React.forwardRef<
260
+ HTMLDivElement,
261
+ React.ComponentProps<"div"> &
262
+ Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
263
+ hideIcon?: boolean
264
+ nameKey?: string
265
+ }
266
+ >(
267
+ (
268
+ { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
269
+ ref
270
+ ) => {
271
+ const { config } = useChart()
272
+
273
+ if (!payload?.length) {
274
+ return null
275
+ }
276
+
277
+ return (
278
+ <div
279
+ ref={ref}
280
+ className={cn(
281
+ "flex items-center justify-center gap-4",
282
+ verticalAlign === "top" ? "pb-3" : "pt-3",
283
+ className
284
+ )}
285
+ >
286
+ {payload.map((item) => {
287
+ const key = `${nameKey || item.dataKey || "value"}`
288
+ const itemConfig = getPayloadConfigFromPayload(config, item, key)
289
+
290
+ return (
291
+ <div
292
+ key={item.value}
293
+ className={cn(
294
+ "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
295
+ )}
296
+ >
297
+ {itemConfig?.icon && !hideIcon ? (
298
+ <itemConfig.icon />
299
+ ) : (
300
+ <div
301
+ className="h-2 w-2 shrink-0 rounded-[2px]"
302
+ style={{
303
+ backgroundColor: item.color,
304
+ }}
305
+ />
306
+ )}
307
+ {itemConfig?.label}
308
+ </div>
309
+ )
310
+ })}
311
+ </div>
312
+ )
313
+ }
314
+ )
315
+ ChartLegendContent.displayName = "ChartLegend"
316
+
317
+ // Helper to extract item config from a payload.
318
+ function getPayloadConfigFromPayload(
319
+ config: ChartConfig,
320
+ payload: unknown,
321
+ key: string
322
+ ) {
323
+ if (typeof payload !== "object" || payload === null) {
324
+ return undefined
325
+ }
326
+
327
+ const payloadPayload =
328
+ "payload" in payload &&
329
+ typeof payload.payload === "object" &&
330
+ payload.payload !== null
331
+ ? payload.payload
332
+ : undefined
333
+
334
+ let configLabelKey: string = key
335
+
336
+ if (
337
+ key in payload &&
338
+ typeof payload[key as keyof typeof payload] === "string"
339
+ ) {
340
+ configLabelKey = payload[key as keyof typeof payload] as string
341
+ } else if (
342
+ payloadPayload &&
343
+ key in payloadPayload &&
344
+ typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
345
+ ) {
346
+ configLabelKey = payloadPayload[
347
+ key as keyof typeof payloadPayload
348
+ ] as string
349
+ }
350
+
351
+ return configLabelKey in config
352
+ ? config[configLabelKey]
353
+ : config[key as keyof typeof config]
354
+ }
355
+
356
+ export {
357
+ ChartContainer,
358
+ ChartTooltip,
359
+ ChartTooltipContent,
360
+ ChartLegend,
361
+ ChartLegendContent,
362
+ ChartStyle,
363
+ }
src/components/ui/checkbox.tsx ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
3
+ import { Check } from "lucide-react"
4
+
5
+ import { cn } from "@/lib/utils"
6
+
7
+ const Checkbox = React.forwardRef<
8
+ React.ElementRef<typeof CheckboxPrimitive.Root>,
9
+ React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
10
+ >(({ className, ...props }, ref) => (
11
+ <CheckboxPrimitive.Root
12
+ ref={ref}
13
+ className={cn(
14
+ "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
15
+ className
16
+ )}
17
+ {...props}
18
+ >
19
+ <CheckboxPrimitive.Indicator
20
+ className={cn("flex items-center justify-center text-current")}
21
+ >
22
+ <Check className="h-4 w-4" />
23
+ </CheckboxPrimitive.Indicator>
24
+ </CheckboxPrimitive.Root>
25
+ ))
26
+ Checkbox.displayName = CheckboxPrimitive.Root.displayName
27
+
28
+ export { Checkbox }
src/components/ui/collapsible.tsx ADDED
@@ -0,0 +1,9 @@
 
 
 
 
 
 
 
 
 
 
1
+ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
2
+
3
+ const Collapsible = CollapsiblePrimitive.Root
4
+
5
+ const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
6
+
7
+ const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
8
+
9
+ export { Collapsible, CollapsibleTrigger, CollapsibleContent }
src/components/ui/command.tsx ADDED
@@ -0,0 +1,153 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import { type DialogProps } from "@radix-ui/react-dialog"
3
+ import { Command as CommandPrimitive } from "cmdk"
4
+ import { Search } from "lucide-react"
5
+
6
+ import { cn } from "@/lib/utils"
7
+ import { Dialog, DialogContent } from "@/components/ui/dialog"
8
+
9
+ const Command = React.forwardRef<
10
+ React.ElementRef<typeof CommandPrimitive>,
11
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive>
12
+ >(({ className, ...props }, ref) => (
13
+ <CommandPrimitive
14
+ ref={ref}
15
+ className={cn(
16
+ "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
17
+ className
18
+ )}
19
+ {...props}
20
+ />
21
+ ))
22
+ Command.displayName = CommandPrimitive.displayName
23
+
24
+ interface CommandDialogProps extends DialogProps {}
25
+
26
+ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
27
+ return (
28
+ <Dialog {...props}>
29
+ <DialogContent className="overflow-hidden p-0 shadow-lg">
30
+ <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
31
+ {children}
32
+ </Command>
33
+ </DialogContent>
34
+ </Dialog>
35
+ )
36
+ }
37
+
38
+ const CommandInput = React.forwardRef<
39
+ React.ElementRef<typeof CommandPrimitive.Input>,
40
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
41
+ >(({ className, ...props }, ref) => (
42
+ <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
43
+ <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
44
+ <CommandPrimitive.Input
45
+ ref={ref}
46
+ className={cn(
47
+ "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
48
+ className
49
+ )}
50
+ {...props}
51
+ />
52
+ </div>
53
+ ))
54
+
55
+ CommandInput.displayName = CommandPrimitive.Input.displayName
56
+
57
+ const CommandList = React.forwardRef<
58
+ React.ElementRef<typeof CommandPrimitive.List>,
59
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
60
+ >(({ className, ...props }, ref) => (
61
+ <CommandPrimitive.List
62
+ ref={ref}
63
+ className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
64
+ {...props}
65
+ />
66
+ ))
67
+
68
+ CommandList.displayName = CommandPrimitive.List.displayName
69
+
70
+ const CommandEmpty = React.forwardRef<
71
+ React.ElementRef<typeof CommandPrimitive.Empty>,
72
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
73
+ >((props, ref) => (
74
+ <CommandPrimitive.Empty
75
+ ref={ref}
76
+ className="py-6 text-center text-sm"
77
+ {...props}
78
+ />
79
+ ))
80
+
81
+ CommandEmpty.displayName = CommandPrimitive.Empty.displayName
82
+
83
+ const CommandGroup = React.forwardRef<
84
+ React.ElementRef<typeof CommandPrimitive.Group>,
85
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
86
+ >(({ className, ...props }, ref) => (
87
+ <CommandPrimitive.Group
88
+ ref={ref}
89
+ className={cn(
90
+ "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
91
+ className
92
+ )}
93
+ {...props}
94
+ />
95
+ ))
96
+
97
+ CommandGroup.displayName = CommandPrimitive.Group.displayName
98
+
99
+ const CommandSeparator = React.forwardRef<
100
+ React.ElementRef<typeof CommandPrimitive.Separator>,
101
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
102
+ >(({ className, ...props }, ref) => (
103
+ <CommandPrimitive.Separator
104
+ ref={ref}
105
+ className={cn("-mx-1 h-px bg-border", className)}
106
+ {...props}
107
+ />
108
+ ))
109
+ CommandSeparator.displayName = CommandPrimitive.Separator.displayName
110
+
111
+ const CommandItem = React.forwardRef<
112
+ React.ElementRef<typeof CommandPrimitive.Item>,
113
+ React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
114
+ >(({ className, ...props }, ref) => (
115
+ <CommandPrimitive.Item
116
+ ref={ref}
117
+ className={cn(
118
+ "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
119
+ className
120
+ )}
121
+ {...props}
122
+ />
123
+ ))
124
+
125
+ CommandItem.displayName = CommandPrimitive.Item.displayName
126
+
127
+ const CommandShortcut = ({
128
+ className,
129
+ ...props
130
+ }: React.HTMLAttributes<HTMLSpanElement>) => {
131
+ return (
132
+ <span
133
+ className={cn(
134
+ "ml-auto text-xs tracking-widest text-muted-foreground",
135
+ className
136
+ )}
137
+ {...props}
138
+ />
139
+ )
140
+ }
141
+ CommandShortcut.displayName = "CommandShortcut"
142
+
143
+ export {
144
+ Command,
145
+ CommandDialog,
146
+ CommandInput,
147
+ CommandList,
148
+ CommandEmpty,
149
+ CommandGroup,
150
+ CommandItem,
151
+ CommandShortcut,
152
+ CommandSeparator,
153
+ }
src/components/ui/context-menu.tsx ADDED
@@ -0,0 +1,198 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
3
+ import { Check, ChevronRight, Circle } from "lucide-react"
4
+
5
+ import { cn } from "@/lib/utils"
6
+
7
+ const ContextMenu = ContextMenuPrimitive.Root
8
+
9
+ const ContextMenuTrigger = ContextMenuPrimitive.Trigger
10
+
11
+ const ContextMenuGroup = ContextMenuPrimitive.Group
12
+
13
+ const ContextMenuPortal = ContextMenuPrimitive.Portal
14
+
15
+ const ContextMenuSub = ContextMenuPrimitive.Sub
16
+
17
+ const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
18
+
19
+ const ContextMenuSubTrigger = React.forwardRef<
20
+ React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
21
+ React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
22
+ inset?: boolean
23
+ }
24
+ >(({ className, inset, children, ...props }, ref) => (
25
+ <ContextMenuPrimitive.SubTrigger
26
+ ref={ref}
27
+ className={cn(
28
+ "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
29
+ inset && "pl-8",
30
+ className
31
+ )}
32
+ {...props}
33
+ >
34
+ {children}
35
+ <ChevronRight className="ml-auto h-4 w-4" />
36
+ </ContextMenuPrimitive.SubTrigger>
37
+ ))
38
+ ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
39
+
40
+ const ContextMenuSubContent = React.forwardRef<
41
+ React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
42
+ React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
43
+ >(({ className, ...props }, ref) => (
44
+ <ContextMenuPrimitive.SubContent
45
+ ref={ref}
46
+ className={cn(
47
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
48
+ className
49
+ )}
50
+ {...props}
51
+ />
52
+ ))
53
+ ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
54
+
55
+ const ContextMenuContent = React.forwardRef<
56
+ React.ElementRef<typeof ContextMenuPrimitive.Content>,
57
+ React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
58
+ >(({ className, ...props }, ref) => (
59
+ <ContextMenuPrimitive.Portal>
60
+ <ContextMenuPrimitive.Content
61
+ ref={ref}
62
+ className={cn(
63
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
64
+ className
65
+ )}
66
+ {...props}
67
+ />
68
+ </ContextMenuPrimitive.Portal>
69
+ ))
70
+ ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
71
+
72
+ const ContextMenuItem = React.forwardRef<
73
+ React.ElementRef<typeof ContextMenuPrimitive.Item>,
74
+ React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
75
+ inset?: boolean
76
+ }
77
+ >(({ className, inset, ...props }, ref) => (
78
+ <ContextMenuPrimitive.Item
79
+ ref={ref}
80
+ className={cn(
81
+ "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
82
+ inset && "pl-8",
83
+ className
84
+ )}
85
+ {...props}
86
+ />
87
+ ))
88
+ ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
89
+
90
+ const ContextMenuCheckboxItem = React.forwardRef<
91
+ React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
92
+ React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
93
+ >(({ className, children, checked, ...props }, ref) => (
94
+ <ContextMenuPrimitive.CheckboxItem
95
+ ref={ref}
96
+ className={cn(
97
+ "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
98
+ className
99
+ )}
100
+ checked={checked}
101
+ {...props}
102
+ >
103
+ <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
104
+ <ContextMenuPrimitive.ItemIndicator>
105
+ <Check className="h-4 w-4" />
106
+ </ContextMenuPrimitive.ItemIndicator>
107
+ </span>
108
+ {children}
109
+ </ContextMenuPrimitive.CheckboxItem>
110
+ ))
111
+ ContextMenuCheckboxItem.displayName =
112
+ ContextMenuPrimitive.CheckboxItem.displayName
113
+
114
+ const ContextMenuRadioItem = React.forwardRef<
115
+ React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
116
+ React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
117
+ >(({ className, children, ...props }, ref) => (
118
+ <ContextMenuPrimitive.RadioItem
119
+ ref={ref}
120
+ className={cn(
121
+ "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122
+ className
123
+ )}
124
+ {...props}
125
+ >
126
+ <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127
+ <ContextMenuPrimitive.ItemIndicator>
128
+ <Circle className="h-2 w-2 fill-current" />
129
+ </ContextMenuPrimitive.ItemIndicator>
130
+ </span>
131
+ {children}
132
+ </ContextMenuPrimitive.RadioItem>
133
+ ))
134
+ ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
135
+
136
+ const ContextMenuLabel = React.forwardRef<
137
+ React.ElementRef<typeof ContextMenuPrimitive.Label>,
138
+ React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
139
+ inset?: boolean
140
+ }
141
+ >(({ className, inset, ...props }, ref) => (
142
+ <ContextMenuPrimitive.Label
143
+ ref={ref}
144
+ className={cn(
145
+ "px-2 py-1.5 text-sm font-semibold text-foreground",
146
+ inset && "pl-8",
147
+ className
148
+ )}
149
+ {...props}
150
+ />
151
+ ))
152
+ ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
153
+
154
+ const ContextMenuSeparator = React.forwardRef<
155
+ React.ElementRef<typeof ContextMenuPrimitive.Separator>,
156
+ React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
157
+ >(({ className, ...props }, ref) => (
158
+ <ContextMenuPrimitive.Separator
159
+ ref={ref}
160
+ className={cn("-mx-1 my-1 h-px bg-border", className)}
161
+ {...props}
162
+ />
163
+ ))
164
+ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
165
+
166
+ const ContextMenuShortcut = ({
167
+ className,
168
+ ...props
169
+ }: React.HTMLAttributes<HTMLSpanElement>) => {
170
+ return (
171
+ <span
172
+ className={cn(
173
+ "ml-auto text-xs tracking-widest text-muted-foreground",
174
+ className
175
+ )}
176
+ {...props}
177
+ />
178
+ )
179
+ }
180
+ ContextMenuShortcut.displayName = "ContextMenuShortcut"
181
+
182
+ export {
183
+ ContextMenu,
184
+ ContextMenuTrigger,
185
+ ContextMenuContent,
186
+ ContextMenuItem,
187
+ ContextMenuCheckboxItem,
188
+ ContextMenuRadioItem,
189
+ ContextMenuLabel,
190
+ ContextMenuSeparator,
191
+ ContextMenuShortcut,
192
+ ContextMenuGroup,
193
+ ContextMenuPortal,
194
+ ContextMenuSub,
195
+ ContextMenuSubContent,
196
+ ContextMenuSubTrigger,
197
+ ContextMenuRadioGroup,
198
+ }
src/components/ui/dialog.tsx ADDED
@@ -0,0 +1,121 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import * as DialogPrimitive from "@radix-ui/react-dialog"
3
+ import { X } from "lucide-react"
4
+
5
+ import { cn } from "@/lib/utils"
6
+
7
+ const Dialog = DialogPrimitive.Root
8
+
9
+ const DialogTrigger = DialogPrimitive.Trigger
10
+
11
+ const DialogPortal = DialogPrimitive.Portal
12
+
13
+ const DialogClose = DialogPrimitive.Close
14
+
15
+ const DialogOverlay = React.forwardRef<
16
+ React.ElementRef<typeof DialogPrimitive.Overlay>,
17
+ React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
18
+ >(({ className, ...props }, ref) => (
19
+ <DialogPrimitive.Overlay
20
+ ref={ref}
21
+ className={cn(
22
+ "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dialog-overlay",
23
+ className
24
+ )}
25
+ {...props}
26
+ />
27
+ ))
28
+ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
29
+
30
+ const DialogContent = React.forwardRef<
31
+ React.ElementRef<typeof DialogPrimitive.Content>,
32
+ React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
33
+ >(({ className, children, ...props }, ref) => (
34
+ <DialogPortal>
35
+ <DialogOverlay />
36
+ <DialogPrimitive.Content
37
+ ref={ref}
38
+ className={cn(
39
+ "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dialog-content max-h-[85vh] overflow-y-auto overscroll-contain touch-pan-y",
40
+ className
41
+ )}
42
+ style={{ WebkitOverflowScrolling: "touch" }}
43
+ {...props}
44
+ >
45
+ {children}
46
+ <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
47
+ <X className="h-4 w-4" />
48
+ <span className="sr-only">Close</span>
49
+ </DialogPrimitive.Close>
50
+ </DialogPrimitive.Content>
51
+ </DialogPortal>
52
+ ))
53
+ DialogContent.displayName = DialogPrimitive.Content.displayName
54
+
55
+ const DialogHeader = ({
56
+ className,
57
+ ...props
58
+ }: React.HTMLAttributes<HTMLDivElement>) => (
59
+ <div
60
+ className={cn(
61
+ "flex flex-col space-y-1.5 text-center sm:text-left",
62
+ className
63
+ )}
64
+ {...props}
65
+ />
66
+ )
67
+ DialogHeader.displayName = "DialogHeader"
68
+
69
+ const DialogFooter = ({
70
+ className,
71
+ ...props
72
+ }: React.HTMLAttributes<HTMLDivElement>) => (
73
+ <div
74
+ className={cn(
75
+ "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
76
+ className
77
+ )}
78
+ {...props}
79
+ />
80
+ )
81
+ DialogFooter.displayName = "DialogFooter"
82
+
83
+ const DialogTitle = React.forwardRef<
84
+ React.ElementRef<typeof DialogPrimitive.Title>,
85
+ React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
86
+ >(({ className, ...props }, ref) => (
87
+ <DialogPrimitive.Title
88
+ ref={ref}
89
+ className={cn(
90
+ "text-lg font-semibold leading-none tracking-tight",
91
+ className
92
+ )}
93
+ {...props}
94
+ />
95
+ ))
96
+ DialogTitle.displayName = DialogPrimitive.Title.displayName
97
+
98
+ const DialogDescription = React.forwardRef<
99
+ React.ElementRef<typeof DialogPrimitive.Description>,
100
+ React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
101
+ >(({ className, ...props }, ref) => (
102
+ <DialogPrimitive.Description
103
+ ref={ref}
104
+ className={cn("text-sm text-muted-foreground", className)}
105
+ {...props}
106
+ />
107
+ ))
108
+ DialogDescription.displayName = DialogPrimitive.Description.displayName
109
+
110
+ export {
111
+ Dialog,
112
+ DialogPortal,
113
+ DialogOverlay,
114
+ DialogClose,
115
+ DialogTrigger,
116
+ DialogContent,
117
+ DialogHeader,
118
+ DialogFooter,
119
+ DialogTitle,
120
+ DialogDescription,
121
+ }
src/components/ui/drawer.tsx ADDED
@@ -0,0 +1,116 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import { Drawer as DrawerPrimitive } from "vaul"
3
+
4
+ import { cn } from "@/lib/utils"
5
+
6
+ const Drawer = ({
7
+ shouldScaleBackground = true,
8
+ ...props
9
+ }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
10
+ <DrawerPrimitive.Root
11
+ shouldScaleBackground={shouldScaleBackground}
12
+ {...props}
13
+ />
14
+ )
15
+ Drawer.displayName = "Drawer"
16
+
17
+ const DrawerTrigger = DrawerPrimitive.Trigger
18
+
19
+ const DrawerPortal = DrawerPrimitive.Portal
20
+
21
+ const DrawerClose = DrawerPrimitive.Close
22
+
23
+ const DrawerOverlay = React.forwardRef<
24
+ React.ElementRef<typeof DrawerPrimitive.Overlay>,
25
+ React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
26
+ >(({ className, ...props }, ref) => (
27
+ <DrawerPrimitive.Overlay
28
+ ref={ref}
29
+ className={cn("fixed inset-0 z-50 bg-black/80", className)}
30
+ {...props}
31
+ />
32
+ ))
33
+ DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
34
+
35
+ const DrawerContent = React.forwardRef<
36
+ React.ElementRef<typeof DrawerPrimitive.Content>,
37
+ React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
38
+ >(({ className, children, ...props }, ref) => (
39
+ <DrawerPortal>
40
+ <DrawerOverlay />
41
+ <DrawerPrimitive.Content
42
+ ref={ref}
43
+ className={cn(
44
+ "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
45
+ className
46
+ )}
47
+ {...props}
48
+ >
49
+ <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
50
+ {children}
51
+ </DrawerPrimitive.Content>
52
+ </DrawerPortal>
53
+ ))
54
+ DrawerContent.displayName = "DrawerContent"
55
+
56
+ const DrawerHeader = ({
57
+ className,
58
+ ...props
59
+ }: React.HTMLAttributes<HTMLDivElement>) => (
60
+ <div
61
+ className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
62
+ {...props}
63
+ />
64
+ )
65
+ DrawerHeader.displayName = "DrawerHeader"
66
+
67
+ const DrawerFooter = ({
68
+ className,
69
+ ...props
70
+ }: React.HTMLAttributes<HTMLDivElement>) => (
71
+ <div
72
+ className={cn("mt-auto flex flex-col gap-2 p-4", className)}
73
+ {...props}
74
+ />
75
+ )
76
+ DrawerFooter.displayName = "DrawerFooter"
77
+
78
+ const DrawerTitle = React.forwardRef<
79
+ React.ElementRef<typeof DrawerPrimitive.Title>,
80
+ React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
81
+ >(({ className, ...props }, ref) => (
82
+ <DrawerPrimitive.Title
83
+ ref={ref}
84
+ className={cn(
85
+ "text-lg font-semibold leading-none tracking-tight",
86
+ className
87
+ )}
88
+ {...props}
89
+ />
90
+ ))
91
+ DrawerTitle.displayName = DrawerPrimitive.Title.displayName
92
+
93
+ const DrawerDescription = React.forwardRef<
94
+ React.ElementRef<typeof DrawerPrimitive.Description>,
95
+ React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
96
+ >(({ className, ...props }, ref) => (
97
+ <DrawerPrimitive.Description
98
+ ref={ref}
99
+ className={cn("text-sm text-muted-foreground", className)}
100
+ {...props}
101
+ />
102
+ ))
103
+ DrawerDescription.displayName = DrawerPrimitive.Description.displayName
104
+
105
+ export {
106
+ Drawer,
107
+ DrawerPortal,
108
+ DrawerOverlay,
109
+ DrawerTrigger,
110
+ DrawerClose,
111
+ DrawerContent,
112
+ DrawerHeader,
113
+ DrawerFooter,
114
+ DrawerTitle,
115
+ DrawerDescription,
116
+ }
src/components/ui/dropdown-menu.tsx ADDED
@@ -0,0 +1,198 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
3
+ import { Check, ChevronRight, Circle } from "lucide-react"
4
+
5
+ import { cn } from "@/lib/utils"
6
+
7
+ const DropdownMenu = DropdownMenuPrimitive.Root
8
+
9
+ const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
10
+
11
+ const DropdownMenuGroup = DropdownMenuPrimitive.Group
12
+
13
+ const DropdownMenuPortal = DropdownMenuPrimitive.Portal
14
+
15
+ const DropdownMenuSub = DropdownMenuPrimitive.Sub
16
+
17
+ const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
18
+
19
+ const DropdownMenuSubTrigger = React.forwardRef<
20
+ React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
21
+ React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
22
+ inset?: boolean
23
+ }
24
+ >(({ className, inset, children, ...props }, ref) => (
25
+ <DropdownMenuPrimitive.SubTrigger
26
+ ref={ref}
27
+ className={cn(
28
+ "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
29
+ inset && "pl-8",
30
+ className
31
+ )}
32
+ {...props}
33
+ >
34
+ {children}
35
+ <ChevronRight className="ml-auto h-4 w-4" />
36
+ </DropdownMenuPrimitive.SubTrigger>
37
+ ))
38
+ DropdownMenuSubTrigger.displayName =
39
+ DropdownMenuPrimitive.SubTrigger.displayName
40
+
41
+ const DropdownMenuSubContent = React.forwardRef<
42
+ React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
43
+ React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
44
+ >(({ className, ...props }, ref) => (
45
+ <DropdownMenuPrimitive.SubContent
46
+ ref={ref}
47
+ className={cn(
48
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
49
+ className
50
+ )}
51
+ {...props}
52
+ />
53
+ ))
54
+ DropdownMenuSubContent.displayName =
55
+ DropdownMenuPrimitive.SubContent.displayName
56
+
57
+ const DropdownMenuContent = React.forwardRef<
58
+ React.ElementRef<typeof DropdownMenuPrimitive.Content>,
59
+ React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
60
+ >(({ className, sideOffset = 4, ...props }, ref) => (
61
+ <DropdownMenuPrimitive.Portal>
62
+ <DropdownMenuPrimitive.Content
63
+ ref={ref}
64
+ sideOffset={sideOffset}
65
+ className={cn(
66
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
67
+ className
68
+ )}
69
+ {...props}
70
+ />
71
+ </DropdownMenuPrimitive.Portal>
72
+ ))
73
+ DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
74
+
75
+ const DropdownMenuItem = React.forwardRef<
76
+ React.ElementRef<typeof DropdownMenuPrimitive.Item>,
77
+ React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
78
+ inset?: boolean
79
+ }
80
+ >(({ className, inset, ...props }, ref) => (
81
+ <DropdownMenuPrimitive.Item
82
+ ref={ref}
83
+ className={cn(
84
+ "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
85
+ inset && "pl-8",
86
+ className
87
+ )}
88
+ {...props}
89
+ />
90
+ ))
91
+ DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
92
+
93
+ const DropdownMenuCheckboxItem = React.forwardRef<
94
+ React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
95
+ React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
96
+ >(({ className, children, checked, ...props }, ref) => (
97
+ <DropdownMenuPrimitive.CheckboxItem
98
+ ref={ref}
99
+ className={cn(
100
+ "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
101
+ className
102
+ )}
103
+ checked={checked}
104
+ {...props}
105
+ >
106
+ <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
107
+ <DropdownMenuPrimitive.ItemIndicator>
108
+ <Check className="h-4 w-4" />
109
+ </DropdownMenuPrimitive.ItemIndicator>
110
+ </span>
111
+ {children}
112
+ </DropdownMenuPrimitive.CheckboxItem>
113
+ ))
114
+ DropdownMenuCheckboxItem.displayName =
115
+ DropdownMenuPrimitive.CheckboxItem.displayName
116
+
117
+ const DropdownMenuRadioItem = React.forwardRef<
118
+ React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
119
+ React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
120
+ >(({ className, children, ...props }, ref) => (
121
+ <DropdownMenuPrimitive.RadioItem
122
+ ref={ref}
123
+ className={cn(
124
+ "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
125
+ className
126
+ )}
127
+ {...props}
128
+ >
129
+ <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
130
+ <DropdownMenuPrimitive.ItemIndicator>
131
+ <Circle className="h-2 w-2 fill-current" />
132
+ </DropdownMenuPrimitive.ItemIndicator>
133
+ </span>
134
+ {children}
135
+ </DropdownMenuPrimitive.RadioItem>
136
+ ))
137
+ DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
138
+
139
+ const DropdownMenuLabel = React.forwardRef<
140
+ React.ElementRef<typeof DropdownMenuPrimitive.Label>,
141
+ React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
142
+ inset?: boolean
143
+ }
144
+ >(({ className, inset, ...props }, ref) => (
145
+ <DropdownMenuPrimitive.Label
146
+ ref={ref}
147
+ className={cn(
148
+ "px-2 py-1.5 text-sm font-semibold",
149
+ inset && "pl-8",
150
+ className
151
+ )}
152
+ {...props}
153
+ />
154
+ ))
155
+ DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
156
+
157
+ const DropdownMenuSeparator = React.forwardRef<
158
+ React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
159
+ React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
160
+ >(({ className, ...props }, ref) => (
161
+ <DropdownMenuPrimitive.Separator
162
+ ref={ref}
163
+ className={cn("-mx-1 my-1 h-px bg-muted", className)}
164
+ {...props}
165
+ />
166
+ ))
167
+ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
168
+
169
+ const DropdownMenuShortcut = ({
170
+ className,
171
+ ...props
172
+ }: React.HTMLAttributes<HTMLSpanElement>) => {
173
+ return (
174
+ <span
175
+ className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
176
+ {...props}
177
+ />
178
+ )
179
+ }
180
+ DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
181
+
182
+ export {
183
+ DropdownMenu,
184
+ DropdownMenuTrigger,
185
+ DropdownMenuContent,
186
+ DropdownMenuItem,
187
+ DropdownMenuCheckboxItem,
188
+ DropdownMenuRadioItem,
189
+ DropdownMenuLabel,
190
+ DropdownMenuSeparator,
191
+ DropdownMenuShortcut,
192
+ DropdownMenuGroup,
193
+ DropdownMenuPortal,
194
+ DropdownMenuSub,
195
+ DropdownMenuSubContent,
196
+ DropdownMenuSubTrigger,
197
+ DropdownMenuRadioGroup,
198
+ }
src/components/ui/form.tsx ADDED
@@ -0,0 +1,176 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import * as LabelPrimitive from "@radix-ui/react-label"
3
+ import { Slot } from "@radix-ui/react-slot"
4
+ import {
5
+ Controller,
6
+ ControllerProps,
7
+ FieldPath,
8
+ FieldValues,
9
+ FormProvider,
10
+ useFormContext,
11
+ } from "react-hook-form"
12
+
13
+ import { cn } from "@/lib/utils"
14
+ import { Label } from "@/components/ui/label"
15
+
16
+ const Form = FormProvider
17
+
18
+ type FormFieldContextValue<
19
+ TFieldValues extends FieldValues = FieldValues,
20
+ TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
21
+ > = {
22
+ name: TName
23
+ }
24
+
25
+ const FormFieldContext = React.createContext<FormFieldContextValue>(
26
+ {} as FormFieldContextValue
27
+ )
28
+
29
+ const FormField = <
30
+ TFieldValues extends FieldValues = FieldValues,
31
+ TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
32
+ >({
33
+ ...props
34
+ }: ControllerProps<TFieldValues, TName>) => {
35
+ return (
36
+ <FormFieldContext.Provider value={{ name: props.name }}>
37
+ <Controller {...props} />
38
+ </FormFieldContext.Provider>
39
+ )
40
+ }
41
+
42
+ const useFormField = () => {
43
+ const fieldContext = React.useContext(FormFieldContext)
44
+ const itemContext = React.useContext(FormItemContext)
45
+ const { getFieldState, formState } = useFormContext()
46
+
47
+ const fieldState = getFieldState(fieldContext.name, formState)
48
+
49
+ if (!fieldContext) {
50
+ throw new Error("useFormField should be used within <FormField>")
51
+ }
52
+
53
+ const { id } = itemContext
54
+
55
+ return {
56
+ id,
57
+ name: fieldContext.name,
58
+ formItemId: `${id}-form-item`,
59
+ formDescriptionId: `${id}-form-item-description`,
60
+ formMessageId: `${id}-form-item-message`,
61
+ ...fieldState,
62
+ }
63
+ }
64
+
65
+ type FormItemContextValue = {
66
+ id: string
67
+ }
68
+
69
+ const FormItemContext = React.createContext<FormItemContextValue>(
70
+ {} as FormItemContextValue
71
+ )
72
+
73
+ const FormItem = React.forwardRef<
74
+ HTMLDivElement,
75
+ React.HTMLAttributes<HTMLDivElement>
76
+ >(({ className, ...props }, ref) => {
77
+ const id = React.useId()
78
+
79
+ return (
80
+ <FormItemContext.Provider value={{ id }}>
81
+ <div ref={ref} className={cn("space-y-2", className)} {...props} />
82
+ </FormItemContext.Provider>
83
+ )
84
+ })
85
+ FormItem.displayName = "FormItem"
86
+
87
+ const FormLabel = React.forwardRef<
88
+ React.ElementRef<typeof LabelPrimitive.Root>,
89
+ React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
90
+ >(({ className, ...props }, ref) => {
91
+ const { error, formItemId } = useFormField()
92
+
93
+ return (
94
+ <Label
95
+ ref={ref}
96
+ className={cn(error && "text-destructive", className)}
97
+ htmlFor={formItemId}
98
+ {...props}
99
+ />
100
+ )
101
+ })
102
+ FormLabel.displayName = "FormLabel"
103
+
104
+ const FormControl = React.forwardRef<
105
+ React.ElementRef<typeof Slot>,
106
+ React.ComponentPropsWithoutRef<typeof Slot>
107
+ >(({ ...props }, ref) => {
108
+ const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
109
+
110
+ return (
111
+ <Slot
112
+ ref={ref}
113
+ id={formItemId}
114
+ aria-describedby={
115
+ !error
116
+ ? `${formDescriptionId}`
117
+ : `${formDescriptionId} ${formMessageId}`
118
+ }
119
+ aria-invalid={!!error}
120
+ {...props}
121
+ />
122
+ )
123
+ })
124
+ FormControl.displayName = "FormControl"
125
+
126
+ const FormDescription = React.forwardRef<
127
+ HTMLParagraphElement,
128
+ React.HTMLAttributes<HTMLParagraphElement>
129
+ >(({ className, ...props }, ref) => {
130
+ const { formDescriptionId } = useFormField()
131
+
132
+ return (
133
+ <p
134
+ ref={ref}
135
+ id={formDescriptionId}
136
+ className={cn("text-sm text-muted-foreground", className)}
137
+ {...props}
138
+ />
139
+ )
140
+ })
141
+ FormDescription.displayName = "FormDescription"
142
+
143
+ const FormMessage = React.forwardRef<
144
+ HTMLParagraphElement,
145
+ React.HTMLAttributes<HTMLParagraphElement>
146
+ >(({ className, children, ...props }, ref) => {
147
+ const { error, formMessageId } = useFormField()
148
+ const body = error ? String(error?.message) : children
149
+
150
+ if (!body) {
151
+ return null
152
+ }
153
+
154
+ return (
155
+ <p
156
+ ref={ref}
157
+ id={formMessageId}
158
+ className={cn("text-sm font-medium text-destructive", className)}
159
+ {...props}
160
+ >
161
+ {body}
162
+ </p>
163
+ )
164
+ })
165
+ FormMessage.displayName = "FormMessage"
166
+
167
+ export {
168
+ useFormField,
169
+ Form,
170
+ FormItem,
171
+ FormLabel,
172
+ FormControl,
173
+ FormDescription,
174
+ FormMessage,
175
+ FormField,
176
+ }
src/components/ui/hover-card.tsx ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
3
+
4
+ import { cn } from "@/lib/utils"
5
+
6
+ const HoverCard = HoverCardPrimitive.Root
7
+
8
+ const HoverCardTrigger = HoverCardPrimitive.Trigger
9
+
10
+ const HoverCardContent = React.forwardRef<
11
+ React.ElementRef<typeof HoverCardPrimitive.Content>,
12
+ React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
13
+ >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
14
+ <HoverCardPrimitive.Content
15
+ ref={ref}
16
+ align={align}
17
+ sideOffset={sideOffset}
18
+ className={cn(
19
+ "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
20
+ className
21
+ )}
22
+ {...props}
23
+ />
24
+ ))
25
+ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
26
+
27
+ export { HoverCard, HoverCardTrigger, HoverCardContent }
src/components/ui/input-otp.tsx ADDED
@@ -0,0 +1,69 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import { OTPInput, OTPInputContext } from "input-otp"
3
+ import { Dot } from "lucide-react"
4
+
5
+ import { cn } from "@/lib/utils"
6
+
7
+ const InputOTP = React.forwardRef<
8
+ React.ElementRef<typeof OTPInput>,
9
+ React.ComponentPropsWithoutRef<typeof OTPInput>
10
+ >(({ className, containerClassName, ...props }, ref) => (
11
+ <OTPInput
12
+ ref={ref}
13
+ containerClassName={cn(
14
+ "flex items-center gap-2 has-[:disabled]:opacity-50",
15
+ containerClassName
16
+ )}
17
+ className={cn("disabled:cursor-not-allowed", className)}
18
+ {...props}
19
+ />
20
+ ))
21
+ InputOTP.displayName = "InputOTP"
22
+
23
+ const InputOTPGroup = React.forwardRef<
24
+ React.ElementRef<"div">,
25
+ React.ComponentPropsWithoutRef<"div">
26
+ >(({ className, ...props }, ref) => (
27
+ <div ref={ref} className={cn("flex items-center", className)} {...props} />
28
+ ))
29
+ InputOTPGroup.displayName = "InputOTPGroup"
30
+
31
+ const InputOTPSlot = React.forwardRef<
32
+ React.ElementRef<"div">,
33
+ React.ComponentPropsWithoutRef<"div"> & { index: number }
34
+ >(({ index, className, ...props }, ref) => {
35
+ const inputOTPContext = React.useContext(OTPInputContext)
36
+ const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
37
+
38
+ return (
39
+ <div
40
+ ref={ref}
41
+ className={cn(
42
+ "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
43
+ isActive && "z-10 ring-2 ring-ring ring-offset-background",
44
+ className
45
+ )}
46
+ {...props}
47
+ >
48
+ {char}
49
+ {hasFakeCaret && (
50
+ <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
51
+ <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
52
+ </div>
53
+ )}
54
+ </div>
55
+ )
56
+ })
57
+ InputOTPSlot.displayName = "InputOTPSlot"
58
+
59
+ const InputOTPSeparator = React.forwardRef<
60
+ React.ElementRef<"div">,
61
+ React.ComponentPropsWithoutRef<"div">
62
+ >(({ ...props }, ref) => (
63
+ <div ref={ref} role="separator" {...props}>
64
+ <Dot />
65
+ </div>
66
+ ))
67
+ InputOTPSeparator.displayName = "InputOTPSeparator"
68
+
69
+ export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
src/components/ui/input.tsx ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+
3
+ import { cn } from "@/lib/utils"
4
+
5
+ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
6
+ ({ className, type, ...props }, ref) => {
7
+ return (
8
+ <input
9
+ type={type}
10
+ className={cn(
11
+ "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12
+ className
13
+ )}
14
+ ref={ref}
15
+ {...props}
16
+ />
17
+ )
18
+ }
19
+ )
20
+ Input.displayName = "Input"
21
+
22
+ export { Input }
src/components/ui/label.tsx ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import * as LabelPrimitive from "@radix-ui/react-label"
3
+ import { cva, type VariantProps } from "class-variance-authority"
4
+
5
+ import { cn } from "@/lib/utils"
6
+
7
+ const labelVariants = cva(
8
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
9
+ )
10
+
11
+ const Label = React.forwardRef<
12
+ React.ElementRef<typeof LabelPrimitive.Root>,
13
+ React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
14
+ VariantProps<typeof labelVariants>
15
+ >(({ className, ...props }, ref) => (
16
+ <LabelPrimitive.Root
17
+ ref={ref}
18
+ className={cn(labelVariants(), className)}
19
+ {...props}
20
+ />
21
+ ))
22
+ Label.displayName = LabelPrimitive.Root.displayName
23
+
24
+ export { Label }
src/components/ui/menubar.tsx ADDED
@@ -0,0 +1,234 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import * as React from "react"
2
+ import * as MenubarPrimitive from "@radix-ui/react-menubar"
3
+ import { Check, ChevronRight, Circle } from "lucide-react"
4
+
5
+ import { cn } from "@/lib/utils"
6
+
7
+ const MenubarMenu = MenubarPrimitive.Menu
8
+
9
+ const MenubarGroup = MenubarPrimitive.Group
10
+
11
+ const MenubarPortal = MenubarPrimitive.Portal
12
+
13
+ const MenubarSub = MenubarPrimitive.Sub
14
+
15
+ const MenubarRadioGroup = MenubarPrimitive.RadioGroup
16
+
17
+ const Menubar = React.forwardRef<
18
+ React.ElementRef<typeof MenubarPrimitive.Root>,
19
+ React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
20
+ >(({ className, ...props }, ref) => (
21
+ <MenubarPrimitive.Root
22
+ ref={ref}
23
+ className={cn(
24
+ "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
25
+ className
26
+ )}
27
+ {...props}
28
+ />
29
+ ))
30
+ Menubar.displayName = MenubarPrimitive.Root.displayName
31
+
32
+ const MenubarTrigger = React.forwardRef<
33
+ React.ElementRef<typeof MenubarPrimitive.Trigger>,
34
+ React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
35
+ >(({ className, ...props }, ref) => (
36
+ <MenubarPrimitive.Trigger
37
+ ref={ref}
38
+ className={cn(
39
+ "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
40
+ className
41
+ )}
42
+ {...props}
43
+ />
44
+ ))
45
+ MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
46
+
47
+ const MenubarSubTrigger = React.forwardRef<
48
+ React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
49
+ React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
50
+ inset?: boolean
51
+ }
52
+ >(({ className, inset, children, ...props }, ref) => (
53
+ <MenubarPrimitive.SubTrigger
54
+ ref={ref}
55
+ className={cn(
56
+ "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
57
+ inset && "pl-8",
58
+ className
59
+ )}
60
+ {...props}
61
+ >
62
+ {children}
63
+ <ChevronRight className="ml-auto h-4 w-4" />
64
+ </MenubarPrimitive.SubTrigger>
65
+ ))
66
+ MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
67
+
68
+ const MenubarSubContent = React.forwardRef<
69
+ React.ElementRef<typeof MenubarPrimitive.SubContent>,
70
+ React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
71
+ >(({ className, ...props }, ref) => (
72
+ <MenubarPrimitive.SubContent
73
+ ref={ref}
74
+ className={cn(
75
+ "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
76
+ className
77
+ )}
78
+ {...props}
79
+ />
80
+ ))
81
+ MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
82
+
83
+ const MenubarContent = React.forwardRef<
84
+ React.ElementRef<typeof MenubarPrimitive.Content>,
85
+ React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
86
+ >(
87
+ (
88
+ { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
89
+ ref
90
+ ) => (
91
+ <MenubarPrimitive.Portal>
92
+ <MenubarPrimitive.Content
93
+ ref={ref}
94
+ align={align}
95
+ alignOffset={alignOffset}
96
+ sideOffset={sideOffset}
97
+ className={cn(
98
+ "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
99
+ className
100
+ )}
101
+ {...props}
102
+ />
103
+ </MenubarPrimitive.Portal>
104
+ )
105
+ )
106
+ MenubarContent.displayName = MenubarPrimitive.Content.displayName
107
+
108
+ const MenubarItem = React.forwardRef<
109
+ React.ElementRef<typeof MenubarPrimitive.Item>,
110
+ React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
111
+ inset?: boolean
112
+ }
113
+ >(({ className, inset, ...props }, ref) => (
114
+ <MenubarPrimitive.Item
115
+ ref={ref}
116
+ className={cn(
117
+ "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
118
+ inset && "pl-8",
119
+ className
120
+ )}
121
+ {...props}
122
+ />
123
+ ))
124
+ MenubarItem.displayName = MenubarPrimitive.Item.displayName
125
+
126
+ const MenubarCheckboxItem = React.forwardRef<
127
+ React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
128
+ React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
129
+ >(({ className, children, checked, ...props }, ref) => (
130
+ <MenubarPrimitive.CheckboxItem
131
+ ref={ref}
132
+ className={cn(
133
+ "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
134
+ className
135
+ )}
136
+ checked={checked}
137
+ {...props}
138
+ >
139
+ <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
140
+ <MenubarPrimitive.ItemIndicator>
141
+ <Check className="h-4 w-4" />
142
+ </MenubarPrimitive.ItemIndicator>
143
+ </span>
144
+ {children}
145
+ </MenubarPrimitive.CheckboxItem>
146
+ ))
147
+ MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
148
+
149
+ const MenubarRadioItem = React.forwardRef<
150
+ React.ElementRef<typeof MenubarPrimitive.RadioItem>,
151
+ React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
152
+ >(({ className, children, ...props }, ref) => (
153
+ <MenubarPrimitive.RadioItem
154
+ ref={ref}
155
+ className={cn(
156
+ "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
157
+ className
158
+ )}
159
+ {...props}
160
+ >
161
+ <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
162
+ <MenubarPrimitive.ItemIndicator>
163
+ <Circle className="h-2 w-2 fill-current" />
164
+ </MenubarPrimitive.ItemIndicator>
165
+ </span>
166
+ {children}
167
+ </MenubarPrimitive.RadioItem>
168
+ ))
169
+ MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
170
+
171
+ const MenubarLabel = React.forwardRef<
172
+ React.ElementRef<typeof MenubarPrimitive.Label>,
173
+ React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
174
+ inset?: boolean
175
+ }
176
+ >(({ className, inset, ...props }, ref) => (
177
+ <MenubarPrimitive.Label
178
+ ref={ref}
179
+ className={cn(
180
+ "px-2 py-1.5 text-sm font-semibold",
181
+ inset && "pl-8",
182
+ className
183
+ )}
184
+ {...props}
185
+ />
186
+ ))
187
+ MenubarLabel.displayName = MenubarPrimitive.Label.displayName
188
+
189
+ const MenubarSeparator = React.forwardRef<
190
+ React.ElementRef<typeof MenubarPrimitive.Separator>,
191
+ React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
192
+ >(({ className, ...props }, ref) => (
193
+ <MenubarPrimitive.Separator
194
+ ref={ref}
195
+ className={cn("-mx-1 my-1 h-px bg-muted", className)}
196
+ {...props}
197
+ />
198
+ ))
199
+ MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
200
+
201
+ const MenubarShortcut = ({
202
+ className,
203
+ ...props
204
+ }: React.HTMLAttributes<HTMLSpanElement>) => {
205
+ return (
206
+ <span
207
+ className={cn(
208
+ "ml-auto text-xs tracking-widest text-muted-foreground",
209
+ className
210
+ )}
211
+ {...props}
212
+ />
213
+ )
214
+ }
215
+ MenubarShortcut.displayname = "MenubarShortcut"
216
+
217
+ export {
218
+ Menubar,
219
+ MenubarMenu,
220
+ MenubarTrigger,
221
+ MenubarContent,
222
+ MenubarItem,
223
+ MenubarSeparator,
224
+ MenubarLabel,
225
+ MenubarCheckboxItem,
226
+ MenubarRadioGroup,
227
+ MenubarRadioItem,
228
+ MenubarPortal,
229
+ MenubarSubContent,
230
+ MenubarSubTrigger,
231
+ MenubarGroup,
232
+ MenubarSub,
233
+ MenubarShortcut,
234
+ }