PHP Classes

File: resources/js/components/Card.vue

Recommend this page to a friend!
  Classes of Naif Alshaye  >  Laravel Nova Twitter Timeline  >  resources/js/components/Card.vue  >  Download  
File: resources/js/components/Card.vue
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Laravel Nova Twitter Timeline
Show a Twitter user timeline in Laravel Nova
Author: By
Last change:
Date: 3 years ago
Size: 3,296 bytes
 

Contents

Class file image Download
<template> <card class="h-auto"> <div class="px-3 py-4"> <div align="center" style="width:32px; margin-left:20px; margin-right:auto;"> <a target="_blank" :href="'https://twitter.com'"> <svg aria-labelledby="simpleicons-twitter-icon" role="img" viewBox="0 0 24 24" fill="#5da3e0" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-twitter-icon">Twitter icon</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg> </a> </div> <h1 class="text-center text-sm text-80 uppercase mb-3" style="margin-top:-30px;">Twitter Timeline</h1> <div v-for="tweet in tweets" class="max-w-sm rounded overflow-hidden"> <div class="px-6 py-1" style="border-bottom:solid 1px #ccc;"> <a style="font-size:16px; text-decoration: none; color:black;" target="_blank" :href="'https://twitter.com/' + tweet.user.screen_name"> <img :src="tweet.user.profile_image_url_https" width="48" style="margin-bottom:-50px; border-radius: 50%;"> </a> <div style="margin-left:55px !important;"> <div> <a style="font-size:16px; text-decoration: none; color:black;" target="_blank" :href="'https://twitter.com/' + tweet.user.screen_name">{{ tweet.user.name}}</a> <a style="color:#7C8B97; font-size:14px;" target="_blank" :href="'https://twitter.com/' + tweet.user.screen_name">@{{tweet.user.screen_name}} </a> <p style="font-size:12px; text-align:right; margin-top:-15px;">{{ tweet.created_at | formatDate}}</p> </div> </div> <a style="font-size:16px; text-decoration: none; color:black;" target="_blank" :href="'https://twitter.com/' + tweet.user.screen_name + '/status/'+ tweet.id_str"> <p style="font-size:14px; color:black; padding-left:55px; margin-top:10px; padding-bottom:15px;"> {{ tweet.text }} </p> </a> </div> </div> </div> </card> </template> <script> export default { props: ['card'], data: () => { return { tweets: [ ] } }, mounted() { Nova.request().get('/nova-vendor/nova-twitter-timeline/timeline') .then(response => { this.tweets = response.data; }); }, } </script>