refactor: 💨

src/components/Note/CommunityDefinition.tsx

@@ -0,0 +1,42 @@
+import { getCommunityDefinition } from '@/lib/event'
+import { Event } from 'nostr-tools'
+import { useMemo } from 'react'
+import ClientSelect from '../ClientSelect'
+import Image from '../Image'
+
+export default function CommunityDefinition({
+  event,
+  className
+}: {
+  event: Event
+  className?: string
+}) {
+  const metadata = useMemo(() => getCommunityDefinition(event), [event])
+
+  const communityNameComponent = (
+    <div className="text-xl font-semibold line-clamp-1">{metadata.name}</div>
+  )
+
+  const communityDescriptionComponent = metadata.description && (
+    <div className="text-sm text-muted-foreground line-clamp-2">{metadata.description}</div>
+  )
+
+  return (
+    <div className={className}>
+      <div className="flex gap-4">
+        {metadata.image && (
+          <Image
+            image={{ url: metadata.image }}
+            className="rounded-lg aspect-square object-cover bg-foreground h-20"
+            hideIfError
+          />
+        )}
+        <div className="flex-1 w-0 space-y-1">
+          {communityNameComponent}
+          {communityDescriptionComponent}
+        </div>
+      </div>
+      <ClientSelect variant="secondary" className="w-full mt-2" event={event} />
+    </div>
+  )
+}