Search results

public/bluesky-logo.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600" height="535" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m299.75 238.48c-26.326-51.007-97.736-146.28-164.21-193.17-63.677-44.919-88.028-37.186-103.82-29.946-18.428 8.3915-21.719 36.692-21.719 53.311s9.0496 136.57 15.138 156.48c19.745 66.145 89.674 88.522 154.17 81.282 3.2908-0.49362 6.5816-0.98723 10.037-1.3163-3.2908 0.49362-6.7461 0.98723-10.037 1.3163-94.445 13.986-178.52 48.374-68.284 170.96 121.1 125.38 166.02-26.82 189.06-104.15 23.035 77.169 49.526 223.94 186.75 104.15 103.17-104.15 28.301-156.97-66.145-170.96-3.2908-0.32908-6.7461-0.82269-10.037-1.3163 3.4553 0.49362 6.7461 0.82269 10.037 1.3163 64.499 7.2397 134.59-15.138 154.17-81.282 5.9234-20.074 15.138-139.86 15.138-156.48s-3.2908-44.919-21.719-53.311c-15.96-7.2397-40.148-14.973-103.82 29.946-66.967 47.058-138.38 142.16-164.7 193.17z" fill="#1185fe"/>
+</svg>

src/app/page.tsx

@@ -2,6 +2,10 @@ import React from 'react';
 import Image from 'next/image';
 import { Input } from '@/components/ui/input';
 import { Separator } from '@/components/ui/separator';
+import { Card, CardContent, CardDescription, CardHeader } from '@/components/ui/card';
+import Link from 'next/link';
+import { SearchResult } from '@/components/search-result';
+import { PublicUser } from '@/lib/github-user';
 
 export default async function Home() {
 

src/components/search-result.tsx

@@ -0,0 +1,62 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+interface SearchResultProps {
+    website: string;
+    website_icon_uri: string;
+    href: string;
+    title: string;
+    description: string;
+    links?: SearchResultLink[];
+}
+
+interface SearchResultLink {
+    text: string;
+    href: string;
+}
+
+export function SearchResult(
+    {
+        website,
+        website_icon_uri,
+        href,
+        title,
+        description,
+        links,
+    }: SearchResultProps,
+) {
+
+    return (
+        <div className="flex flex-col space-y-2">
+            <Link href={href} className="flex flex-row space-x-2 items-center">
+                <div className="flex items-center justify-center h-8 w-8 rounded-full overflow-hidden bg-white">
+                    <Image
+                        height="100"
+                        width="100"
+                        src={website_icon_uri}
+                        alt={website}/>
+                </div>
+                <div className="flex flex-col -space-y-1">
+                    <span className="text-sm font-thin">{website}</span>
+                    <span className="text-xs text-white/50">{href}</span>
+                </div>
+            </Link>
+            <div className="flex flex-col">
+                <Link href={href} className="text-xl text-blue-300">{title}</Link>
+                <span className="test-sm text-white/80">{description}</span>
+            </div>
+            {
+                links && links.length > 0 &&
+                <div className="flex flex-row space-x-4">
+                    {
+                        links.map(({ text, href }) =>
+                            <Link key={text} href={href} className="text-blue-300 hover:underline">
+                                {text}
+                            </Link>
+                        )
+                    }
+                </div>
+            }
+        </div>
+    );
+}