Skip to content

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

Merged
merged 1 commit into from
May 16, 2025
Merged

update camel tool and header #10

merged 1 commit into from
May 16, 2025

Conversation

Douglasymlai
Copy link
Collaborator

No description provided.

@Douglasymlai Douglasymlai requested a review from Copilot May 16, 2025 12:29
@Douglasymlai Douglasymlai merged commit 2a41bc9 into dev May 16, 2025
1 check passed
Copy link

@Copilot Copilot AI left a 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">

Comment on lines +54 to +71

// 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]);
Copy link
Preview

Copilot AI May 16, 2025

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.

Suggested change
// 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.

@Douglasymlai Douglasymlai deleted the header-update branch May 19, 2025 16:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant