Telegram-style Link Components 4.txt

Certainly! I understand you want to create an interface for managing links that's similar to how Telegram handles shared links. Telegram typically displays links with a preview, including an image (if available), title, and a brief description. Let's redesign our components to achieve a look and feel similar to Telegram's link previews.

We'll update our `LinkPreview` component and create a new `LinkItem` component to display saved links in a Telegram-like style. Then, we'll modify our `LinkList` to use these new components.

Let's start with the updated components:



```javascript
// src/components/LinkPreview.js
import React, { useState, useEffect } from 'react';
import './LinkPreview.css';

const LinkPreview = ({ url, onMetadataFetch }) => {
  const [metadata, setMetadata] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!url) return;

    const fetchMetadata = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(`https://api.microlink.io?url=${encodeURIComponent(url)}`);
        const data = await response.json();
        if (data.status === 'success') {
          setMetadata(data.data);
          onMetadataFetch(data.data);
        } else {
          throw new Error('Failed to fetch metadata');
        }
      } catch (err) {
        setError('Error fetching link preview');
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchMetadata();
  }, [url, onMetadataFetch]);

  if (loading) return <div className="link-preview loading">Loading preview...</div>;
  if (error) return <div className="link-preview error">{error}</div>;
  if (!metadata) return null;

  return (
    <div className="link-preview">
      <div className="link-preview-content">
        <h3 className="link-title">{metadata.title}</h3>
        <p className="link-description">{metadata.description}</p>
        <span className="link-url">{metadata.url}</span>
      </div>
      {metadata.image && (
        <div className="link-image-container">
          <img src={metadata.image.url} alt="Link preview" className="link-image" />
        </div>
      )}
    </div>
  );
};

export default LinkPreview;

// src/components/LinkItem.js
import React from 'react';
import './LinkItem.css';

const LinkItem = ({ link }) => {
  return (
    <div className="link-item">
      <div className="link-item-content">
        <h3 className="link-title">{link.title}</h3>
        <p className="link-description">{link.description}</p>
        <a href={link.url} className="link-url" target="_blank" rel="noopener noreferrer">
          {link.url}
        </a>
        {link.tags && link.tags.length > 0 && (
          <div className="link-tags">
            {link.tags.map((tag, index) => (
              <span key={index} className="link-tag">#{tag}</span>
            ))}
          </div>
        )}
      </div>
      {link.image && (
        <div className="link-image-container">
          <img src={link.image} alt="Link preview" className="link-image" />
        </div>
      )}
    </div>
  );
};

export default LinkItem;

// src/components/LinkList.js
import React, { useState, useEffect } from 'react';
import { db } from '../firebase';
import { collection, query, onSnapshot } from 'firebase/firestore';
import LinkItem from './LinkItem';
import './LinkList.css';

function LinkList() {
  const [links, setLinks] = useState([]);

  useEffect(() => {
    const q = query(collection(db, 'links'));
    const unsubscribe = onSnapshot(q, (querySnapshot) => {
      const linksList = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setLinks(linksList);
    });

    return () => unsubscribe();
  }, []);

  return (
    <div className="link-list">
      <h2>Your Links</h2>
      {links.map(link => (
        <LinkItem key={link.id} link={link} />
      ))}
    </div>
  );
}

export default LinkList;

// src/components/LinkPreview.css
.link-preview {
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
  display: flex;
  background-color: #f6f8fa;
}

.link-preview-content {
  flex: 1;
}

.link-image-container {
  width: 100px;
  height: 100px;
  margin-left: 12px;
  overflow: hidden;
}

.link-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.link-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.link-description {
  margin: 0 0 8px;
  font-size: 14px;
  color: #586069;
}

.link-url {
  font-size: 12px;
  color: #0366d6;
}

.loading, .error {
  padding: 12px;
  text-align: center;
  color: #586069;
}

// src/components/LinkItem.css
.link-item {
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
  display: flex;
  background-color: #ffffff;
}

.link-item-content {
  flex: 1;
}

.link-image-container {
  width: 100px;
  height: 100px;
  margin-left: 12px;
  overflow: hidden;
}

.link-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.link-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.link-description {
  margin: 0 0 8px;
  font-size: 14px;
  color: #586069;
}

.link-url {
  font-size: 12px;
  color: #0366d6;
  text-decoration: none;
}

.link-url:hover {
  text-decoration: underline;
}

.link-tags {
  margin-top: 8px;
}

.link-tag {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 4px;
  background-color: #f1f8ff;
  color: #0366d6;
  font-size: 12px;
  border-radius: 3px;
}

// src/components/LinkList.css
.link-list {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.link-list h2 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
}

```

Now, let me explain the changes and how this new Telegram-like interface works:

1. Updated `LinkPreview` Component:
   - The layout is now more similar to Telegram's link previews.
   - It displays the title, description, and URL in a structured format.
   - If an image is available, it's displayed on the right side.

2. New `LinkItem` Component:
   - This component is used to display saved links in the `LinkList`.
   - It's similar to the `LinkPreview` but includes tags and makes the URL clickable.

3. Updated `LinkList` Component:
   - Now uses the new `LinkItem` component to display each link.

4. CSS Styles:
   - Added styles for `LinkPreview`, `LinkItem`, and `LinkList` to achieve a clean, Telegram-like appearance.

To integrate these changes:

1. Update `src/components/LinkPreview.js` with the new code.
2. Create a new file `src/components/LinkItem.js` with the provided code.
3. Update `src/components/LinkList.js` with the new code.
4. Create the CSS files (`LinkPreview.css`, `LinkItem.css`, and `LinkList.css`) in the `src/components/` directory with the provided styles.

These changes will give your link interface a look and feel similar to Telegram's link previews. The links will be displayed in a card-like format with an image (if available), title, description, and tags.

To further enhance this Telegram-like interface, you could:

1. Add a hover effect to the link items for better interactivity.
2. Implement a "copy link" button for each link item.
3. Add the ability to edit or delete saved links.
4. Implement a masonry layout for the link list if you want to support variable height link items.

Would you like me to explain any part of this implementation in more detail or help you with any of these additional enhancements?