Quotes Feed

The Night Sky - Testimonials

by codemeasandwich

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css">

SASS

header
  background-color: black
  padding: 1rem
  display: flex
  align-items: center

  .logo
    background-color: white
    border-radius: 50%  // Creates a circular shape
    width: 50px
    height: 50px
    display: flex
    align-items: center
    justify-content: center
    margin-right: 1rem  // Adds some space between the logo and the header text

    .logo-text
      color: black
      font: 0.6rem 'Arial', Arial, sans-serif; 
      font-stretch: condensed;
      line-height: 1.2
      text-align: center

.comments
  padding: 1rem
  display: flex
  flex-direction: column
  height: 100vh  // Ensure it takes the full height of the viewport
  
.comment
  color: white
  font-family: 'Times New Roman', Times, serif
  padding: 1rem
  margin-bottom: 1rem

  p
    font-size: 12px

  p:nth-child(2)  // This targets the second <p> element which contains the comment text
    font-size: 20px
    
.comment-list
 background-color: rgba(10, 14, 21, 0.8)  // Sets the background color and opacity
 
  padding: 32px  // Sets the internal padding to 32 pixels
 
  order: 2  // This will place the comment-list below the future-content in mobile view

.future-content
  order: 1  // This will place the future-content above the comment-list in mobile view

@media (min-width: 768px)  // Adjust the breakpoint to your preference
  .comments
    flex-direction: row

  .comment-list
    flex: 1
    order: 1  // Reset the order to default for desktop view

  .future-content
    flex: 3
    order: 2  // Reset the order to default for desktop view

.comment
  padding: 1rem
  margin-bottom: 1rem

h2
  font-size: 1.5rem
  margin-bottom: 0.5rem

p
  margin-bottom: 0.5rem

.background
  background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gx....')

React

const domain = 'https://api-server.thenightsky.com'
const options = {
      includeJewelry: 'false',
      includeSavedDesigns: 'true',
      includeBlankQuotes: 'false',
      deduplicateQuotes: 'true',
      sort: 'desc',
      limit: 50,
}; // END options
/**
 * Fetches comments from the API based on the provided options.
 *
 * @param {Object} options - The options for fetching comments.
 * @param {string} [options.includeJewelry=false] - Whether to include Jewelry Pendant results; Jewelry tends to have little or no quote text.
 * @param {string} [options.includeSavedDesigns=true] - Whether to include saved designs or only show quotes from purchased items.
 * @param {string} [options.includeBlankQuotes=false] - Whether to include items where the quote was empty, while the date and title should still be valid.
 * @param {string} [options.deduplicateQuotes=true] - Whether to remove items where the quote is the same as another in the list, e.g., a saved design converted to an order elsewhere or a multi-item order.
 * @param {string} [options.sort="desc"] - The order of results based on paid date (for purchased orders) or createdAt date (for saved designs); "asc" for ascending, "desc" for descending.
 * @param {number} [options.limit=50] - The number of results to return, ranging from 0 to 20000.
 * @returns {Promise<Array>} A promise that resolves to an array of comments.
 */
function fetchComments (options) {
  const url = new URL(`${domain}/api/feeds/quotes`);
  url.search = new URLSearchParams(options).toString();
  return fetch(url).then(response => response.json());
} // END fetchComments
 /**
 * Adds a leading zero to a single-digit number, returns a string with a length of at least 2 characters.
 * 
 * @param {number} time - The number to which a leading zero should be added if it's less than 10.
 * @returns {string} The formatted string with a leading zero if necessary.
 */
function leadingZero(time){
 	return `${time}`.padStart(2, '0')
} // END...