Skip to content

Instantly share code, notes, and snippets.

Avatar

Mithicher mithicher

View GitHub Profile
@mithicher
mithicher / m-editor.blade.php
Last active Jun 21, 2022
Markdown Editor Component with AlpineJS & Laravel Blade
View m-editor.blade.php
@props([
'id' => 'editor-'. str()->random(8),
'height' => '400px',
'label' => null,
'name' => null,
'value' => null,
'noMargin' => false,
'readonly' => false,
'disabled' => false,
'toolbar' => true
@mithicher
mithicher / purecss-horizontal-bar-chart.blade.php
Last active Nov 16, 2021
PureCSS Horizontal Bar Chart Laravel Blade Component with AlpineJS and TailwindCSS
View purecss-horizontal-bar-chart.blade.php
{{-- Usage
<x-purecss-horizontal-bar-chart
bar-chart-id="horizontalbar"
bar-color="bg-gradient-to-r from-indigo-300 to-purple-400"
:chart-data='[
[
"label" => "Team A",
"value" => 25,
],
[
@mithicher
mithicher / table-simple.blade.php
Last active Jan 9, 2022
Simple Laravel Blade Table Component With Alpine.js and TailwindCSS
View table-simple.blade.php
{{--
Simple Example:
<x-table-simple
striped // default: false
:columns='[
[
"name" => "Name",
"field" => "name",
"columnClasses" => "", // classes to style table th
"rowClasses" => "" // classes to style table td
@mithicher
mithicher / meilisearch-autocomplete.blade.php
Created Sep 27, 2021
MeiliSearch Laravel Blade Component
View meilisearch-autocomplete.blade.php
@props([
'id' => 'autocomplete-'. uniqid(),
'placeholder' => 'Search...',
'indexName' => '',
'publicKey' => '',
'host' => 'http://127.0.0.1:7700',
])
<div
x-data="{
@mithicher
mithicher / books.json
Created Sep 27, 2021
Sample Books Json Data
View books.json
[
{ "_id" : 1, "title" : "Unlocking Android", "isbn" : "1933988673", "pageCount" : 416, "publishedDate" : { "$date" : "2009-04-01T00:00:00.000-0700" }, "thumbnailUrl" : "https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-images/ableson.jpg", "shortDescription" : "Unlocking Android: A Developer's Guide provides concise, hands-on instruction for the Android operating system and development tools. This book teaches important architectural concepts in a straightforward writing style and builds on this with practical and useful examples throughout.", "longDescription" : "Android is an open source mobile phone platform based on the Linux operating system and developed by the Open Handset Alliance, a consortium of over 30 hardware, software and telecom companies that focus on open standards for mobile devices. Led by search giant, Google, Android is designed to deliver a better and more open and cost effective mobile experience. Unlocking Android: A Developer's Guide provides concise, hands-on instruction f
@mithicher
mithicher / card-weather-forecast.blade.php
Created Sep 8, 2021
Weather Forecast Card Blade Component
View card-weather-forecast.blade.php
// Usage
// <x-card-weather-forecast location="Guwahati" api-key="your-weatherapi.com-api-key" />
@props([
"location" => "Guwahati",
"apiKey" => "",
"poll" => 10000
])
<div class="bg-white shadow rounded-lg p-5 dark:bg-gray-800 max-w-full"
@mithicher
mithicher / tom-select.blade.php
Last active Mar 10, 2022
Tom Select Livewire Blade Component
View tom-select.blade.php
/* Component Usage
// Data for options
$users = \App\User::limit(6)->get()->transform(fn($user) => [
'id' => $user->id,
'title' => $user->name,
'subtitle' => $user->email
]);
// Usage in view
@mithicher
mithicher / alpinejs-datepicker.html
Last active Jun 30, 2022
Datepicker with Alpine.js and Tailwind CSS
View alpinejs-datepicker.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CodePen - Datepicker with TailwindCSS and AlpineJS</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
<script
@mithicher
mithicher / pikaday-dark.css
Created May 22, 2020
Pikaday Theme - Dark version
View pikaday-dark.css
.pikaday-dark {
--backgroundColor: #2d3748;
--textColor: #f7fafc;
--currentDateTextColor: #3182ce;
--selectedDateBackgroundColor: #3182ce;
--selectedDateTextColor: #f7fafc;
--labelTextColor: #3182ce; /* eg. May 2020 */
--weekDaysTextColor: #a0aec0; /* eg. Mo Tu We ....*/
@mithicher
mithicher / pikaday-white.css
Created May 22, 2020
Pikaday Theme - White version
View pikaday-white.css
.pikaday-white {
--backgroundColor: #ffffff;
--textColor: #718096;
--currentDateTextColor: #3182ce;
--selectedDateBackgroundColor: #3182ce;
--selectedDateTextColor: #ffffff;
--labelTextColor: #4a5568; /* eg. May 2020 */
--weekDaysTextColor: #a0aec0; /* eg. Mo Tu We ....*/