Skip to content

Commit 0df25d5

Browse files
committed
Enhance FrameworkList component in Card.tsx by sorting frameworks based on their order in FrameworkNames. Update FrameworkNames in frameworks.ts to include 'svelte' and remove duplicate entry for improved clarity and consistency.
1 parent c76f59c commit 0df25d5

File tree

2 files changed

+13
-4
lines changed

2 files changed

+13
-4
lines changed

components/Card.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ import {
1313
TooltipTrigger,
1414
} from "@/components/ui/tooltip";
1515
import { FeatureName, Features } from "@/lib/features";
16-
import { FrameworkIcons, FrameworkTitles } from "@/lib/frameworks";
16+
import {
17+
FrameworkIcons,
18+
FrameworkNames,
19+
FrameworkTitles,
20+
} from "@/lib/frameworks";
1721
import { FrameworkName, LibraryInfo } from "@/lib/libraries";
1822
import { sortedFeatureNames } from "@/lib/sorting";
1923
import { filesize } from "filesize";
@@ -105,7 +109,12 @@ type FrameworkListProps = {
105109
};
106110

107111
const FrameworkList = memo(({ info }: FrameworkListProps) => {
108-
const names = Object.keys(info.frameworks) as FrameworkName[];
112+
// Sort the frameworks by their order in FrameworkNames.
113+
const names = Object.keys(info.frameworks)
114+
.filter((name): name is FrameworkName =>
115+
FrameworkNames.includes(name as FrameworkName),
116+
)
117+
.sort((a, b) => FrameworkNames.indexOf(a) - FrameworkNames.indexOf(b));
109118
return (
110119
<div className="flex space-x-2 text-2xl">
111120
{names.map((name) => {

lib/frameworks.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@ import { FrameworkName } from "./libraries";
77
// An ordered set of all framework names.
88
export const FrameworkNames: FrameworkName[] = [
99
"react",
10+
"svelte",
1011
"vue",
1112
"angular",
12-
"svelte",
1313
"ember",
1414
"jquery",
1515
"vanilla",
1616
];
1717

1818
export const FrameworkTitles = {
1919
react: "React",
20+
svelte: "Svelte",
2021
vue: "Vue.js",
2122
angular: "Angular",
22-
svelte: "Svelte",
2323
ember: "Ember.js",
2424
jquery: "jQuery",
2525
vanilla: "Vanilla JavaScript (no framework)",

0 commit comments

Comments
 (0)