-
Notifications
You must be signed in to change notification settings - Fork 1
update camel tool and header #10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR updates the Camel tool metadata and refreshes the header and related UI components.
- Updates metadata in public/servers/camel.json for Camel Toolkits.
- Introduces a new swipe card component and integrates it into the header.
- Adds a new badge variant and filter logic for handling Camel servers in the app page.
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.
Show a summary per file
File | Description |
---|---|
public/servers/camel.json | Updated tool metadata for Camel Toolkits with new key, name, and description. |
components/swipe.card.tsx | Added swipe card component with automatic and manual rotation functionality. |
components/header.tsx | Refactored header layout and integrated the swipe card component. |
components/badge.tsx | Introduced a new "pink" badge variant. |
app/page.tsx | Updated server filter options and badge variant selection logic. |
Comments suppressed due to low confidence (4)
public/servers/camel.json:3
- [nitpick] Confirm that the change from 'camel-tool' to 'Camel Toolkits' and the corresponding key update to 'camel-toolkits' is intentional and consistent with related usage across the project.
"name": "Camel Toolkits",
app/page.tsx:131
- [nitpick] Double-check that the conditional logic for selecting badge variants correctly covers all expected 'server.command' values and that commands not explicitly handled don't lead to an unintended visual appearance.
<Badge variant={server.command === 'uvx' ? 'secondary' : server.command === 'npx' ? 'pink' : undefined}>
app/page.tsx:172
- [nitpick] Ensure that adding the 'camel' filter value is supported by the rest of the server filtering logic and UI, and that it does not inadvertently exclude or misclassify servers.
const [filter, setFilter] = useState<'all' | 'official' | 'anthropic' | 'camel'>('all');
components/header.tsx:5
- [nitpick] Verify that the updated padding values in the header align with the overall design guidelines and accessibility standards for consistent visual hierarchy.
<header className="pt-22 pb-8">
|
||
// Auto-rotate cards effect | ||
useEffect(() => { | ||
const interval = setInterval(() => { | ||
if (cards.length > 0) { | ||
setCards(prevCards => { | ||
const newCards = [...prevCards]; | ||
const lastCard = newCards.pop(); | ||
if (lastCard) { | ||
newCards.unshift(lastCard); | ||
} | ||
return newCards; | ||
}); | ||
} | ||
}, 10000); | ||
|
||
return () => clearInterval(interval); | ||
}, [cards]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The auto-rotate interval is recreated on every change to 'cards' due to its dependency array including 'cards'. Consider using an empty dependency array along with a functional state update or a ref to avoid unnecessary interval re-creations.
// Auto-rotate cards effect | |
useEffect(() => { | |
const interval = setInterval(() => { | |
if (cards.length > 0) { | |
setCards(prevCards => { | |
const newCards = [...prevCards]; | |
const lastCard = newCards.pop(); | |
if (lastCard) { | |
newCards.unshift(lastCard); | |
} | |
return newCards; | |
}); | |
} | |
}, 10000); | |
return () => clearInterval(interval); | |
}, [cards]); | |
const intervalRef = React.useRef<NodeJS.Timeout | null>(null); | |
// Auto-rotate cards effect | |
useEffect(() => { | |
intervalRef.current = setInterval(() => { | |
setCards(prevCards => { | |
if (prevCards.length === 0) return prevCards; | |
const newCards = [...prevCards]; | |
const lastCard = newCards.pop(); | |
if (lastCard) { | |
newCards.unshift(lastCard); | |
} | |
return newCards; | |
}); | |
}, 10000); | |
return () => { | |
if (intervalRef.current) { | |
clearInterval(intervalRef.current); | |
} | |
}; | |
}, []); |
Copilot uses AI. Check for mistakes.
No description provided.