diff options
| author |  Anshul Gupta <ansg191@anshulg.com>
| 2024-06-07 18:32:16 -0700 |
|---|---|---|
| committer | Anshul Gupta <ansg191@anshulg.com>
| 2024-06-07 18:32:16 -0700 |
| commit | cb1e56050c778661dd2ef45f02c86b023c5f6b14 (patch) | |
| tree | 3bb66ee791237200c58cee161fed5ac3aa35221e | |
| parent | 1217b0891c3c6be0a94c2275750029614e16640d (diff) | |
| download | CS172-Project-cb1e56050c778661dd2ef45f02c86b023c5f6b14.tar.gz CS172-Project-cb1e56050c778661dd2ef45f02c86b023c5f6b14.tar.zst CS172-Project-cb1e56050c778661dd2ef45f02c86b023c5f6b14.zip | |
Add image to search results
| -rw-r--r-- | web/src/Doc.css | 11 | ||||
| -rw-r--r-- | web/src/Doc.tsx | 21 |
2 files changed, 24 insertions, 8 deletions
diff --git a/web/src/Doc.css b/web/src/Doc.css index 578febd..cc03bbc 100644 --- a/web/src/Doc.css +++ b/web/src/Doc.css @@ -1,5 +1,6 @@ .card-body { text-align: left; + display: flex; } .doc-title { @@ -17,4 +18,14 @@ .doc-domain { margin: 0 1em 0 0; +} + +.image-container { + margin-right: 1em; +} + +.image { + height: 50px; + width: 50px; + object-fit: contain; }
\ No newline at end of file diff --git a/web/src/Doc.tsx b/web/src/Doc.tsx index d0af81d..e7d2a42 100644 --- a/web/src/Doc.tsx +++ b/web/src/Doc.tsx @@ -9,14 +9,19 @@ function Doc({document}: DocParams) { return ( <div className="card"> <div className="card-body"> - <h2 className='doc-title'> - <a href={document.url} target="_blank" rel="noreferrer noopener"> - {document.title} - </a> - </h2> - <div className='doc-domain-score'> - <p className='doc-domain'>{document.domain}</p> - <p className='doc-domain'>Score: {(document.score).toFixed(2)}</p> + <div className="image-container"> + <img className="image" src={document.images[0]} alt={document.title}/> + </div> + <div> + <h2 className='doc-title'> + <a href={document.url} target="_blank" rel="noreferrer noopener"> + {document.title} + </a> + </h2> + <div className='doc-domain-score'> + <p className='doc-domain'>{document.domain}</p> + <p className='doc-domain'>Score: {(document.score).toFixed(2)}</p> + </div> </div> </div> </div> |