refactor(website): code optimization

Author: Rel1cx

apps/website/components/BskyPost.tsx

@@ -10,7 +10,7 @@ export interface BskyPostProps {
 
 export function BskyPost({ id, classNames, handle }: BskyPostProps) {
   return (
-    <div className={cn("bsky-post", "not-prose", "my-8", classNames)}>
+    <div className={cn("not-prose my-8", "bsky-post", classNames)}>
       <Post handle={handle} id={id} />
     </div>
   );

apps/website/components/GitHubRepo.tsx

@@ -4,7 +4,7 @@ import { GithubInfo } from "fumadocs-ui/components/github-info";
 export function GitHubRepo({ className, token, ...rest }: Parameters<typeof GithubInfo>[0]) {
   return (
     <GithubInfo
-      className={cn("rounded-lg", "bg-fd-card", "outline", "outline-fd-border", className)}
+      className={cn("rounded-lg bg-fd-card outline outline-fd-border", className)}
       token={token ?? process.env["GITHUB_TOKEN"] ?? ""}
       {...rest}
     />

apps/website/components/GitHubRepoGrid.tsx

@@ -0,0 +1,21 @@
+import { GitHubRepo } from "#/components/GitHubRepo";
+import { cn } from "#/lib/cn";
+
+interface GitHubRepoGridProps {
+  className?: string;
+  repos: { owner: string; repo: string }[];
+}
+
+export function GitHubRepoGrid({ className, repos }: GitHubRepoGridProps) {
+  return (
+    <div className={cn("not-prose grid grid-cols-1 gap-4 md:grid-cols-2", className)}>
+      {repos.map(({ owner, repo }) => (
+        <GitHubRepo
+          key={`${owner}/${repo}`}
+          owner={owner}
+          repo={repo}
+        />
+      ))}
+    </div>
+  );
+}

apps/website/content/docs/community.mdx

@@ -3,12 +3,13 @@ title: Community
 description: "Discover the growing community around ESLint React"
 ---
 
-import { BskyPost } from "../../components/BskyPost";
-import { CommunityShowcases, CommunityPresets } from "./community";
+import { BskyPost } from "#/components/BskyPost";
+import { GitHubRepoGrid } from "#/components/GitHubRepoGrid";
+import { projects, presets } from "./community.tsx"
 
 ## OSS Projects Using ESLint React
 
-<CommunityShowcases />
+<GitHubRepoGrid repos={projects} />
 
 <small>
 
@@ -28,4 +29,4 @@ Find more on [https://x.com/search?q=eslint-react.xyz](https://x.com/search?q=es
 
 **Community Maintained Presets that use ESLint React**
 
-<CommunityPresets />
+<GitHubRepoGrid repos={presets} />

apps/website/content/docs/community.tsx

@@ -1,6 +1,4 @@
-import { GitHubRepo } from "#/components/GitHubRepo";
-
-const repos = [
+export const projects = [
   { owner: "DimensionDev", repo: "Maskbook" },
   { owner: "electric-sql", repo: "electric" },
   { owner: "electric-sql", repo: "pglite" },
@@ -25,38 +23,10 @@ const repos = [
   { owner: "XYOracleNetwork", repo: "sdk-xyo-react-js" },
 ];
 
-const presets = [
+export const presets = [
   { owner: "AndreaPontrandolfo", repo: "sheriff" },
   { owner: "antfu", repo: "eslint-config" },
   { owner: "RebeccaStevens", repo: "eslint-config-rebeccastevens" },
   { owner: "SukkaW", repo: "eslint-config-sukka" },
   { owner: "upleveled", repo: "eslint-config-upleveled" },
 ];
-
-export function CommunityShowcases() {
-  return (
-    <div className="not-prose grid grid-cols-1 gap-4 md:grid-cols-2">
-      {repos.map(({ owner, repo }) => (
-        <GitHubRepo
-          key={`${owner}/${repo}`}
-          owner={owner}
-          repo={repo}
-        />
-      ))}
-    </div>
-  );
-}
-
-export function CommunityPresets() {
-  return (
-    <div className="not-prose grid grid-cols-1 gap-4 md:grid-cols-2">
-      {presets.map(({ owner, repo }) => (
-        <GitHubRepo
-          key={`${owner}/${repo}`}
-          owner={owner}
-          repo={repo}
-        />
-      ))}
-    </div>
-  );
-}