Namespace blade component
This commit is contained in:
36
app/View/Components/NamespaceComponent.php
Normal file
36
app/View/Components/NamespaceComponent.php
Normal file
@@ -0,0 +1,36 @@
|
||||
<?php
|
||||
|
||||
namespace App\View\Components;
|
||||
|
||||
use Illuminate\View\Component;
|
||||
|
||||
class NamespaceComponent extends Component
|
||||
{
|
||||
public $name;
|
||||
public $color;
|
||||
public $key;
|
||||
public $description;
|
||||
|
||||
/**
|
||||
* Create a new component instance.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function __construct($name,$color, $key, $description)
|
||||
{
|
||||
$this->name = $name;
|
||||
$this->color = $color;
|
||||
$this->key = $key;
|
||||
$this->description = $description;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the view / contents that represent the component.
|
||||
*
|
||||
* @return \Illuminate\View\View|string
|
||||
*/
|
||||
public function render()
|
||||
{
|
||||
return view('components.namespace-component');
|
||||
}
|
||||
}
|
22
resources/views/components/namespace-component.blade.php
Normal file
22
resources/views/components/namespace-component.blade.php
Normal file
@@ -0,0 +1,22 @@
|
||||
<div
|
||||
class="relative flex items-center w-full px-2 transition-all duration-200 transform mini-card lg:max-w-md first:ml-4 last:pr-6 hover:-translate-y-4">
|
||||
<div class="flex flex-col h-full overflow-hidden bg-white border-2 border-{{$color}}-500 rounded-lg w-full">
|
||||
<div class="flex justify-center px-4 pt-4">
|
||||
<div class="flex flex-wrap items-center -mb-2">
|
||||
<a href="{{route('namespaces.show', $key)}}"
|
||||
class="MvAamu inline-block text-md tracking-wide py-2 px-12 bg-{{$color}}-500 text-white rounded-md mr-2 mb-2 transform transition-all duration-100 ease-in-out hover:bg-orange-50 border-2 border-gray-100 hover:border-{{$color}}-500 hover:text-{{$color}}-700"
|
||||
style="font-weight: 100;">{{$name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{route('namespaces.show', $key)}}" class="relative block h-full px-4 py-4"
|
||||
style="min-height:auto;">
|
||||
<div class="leading-7 ">
|
||||
<p class="MvTyper text-center" style="direction: rtl;">{{$description}}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
@@ -21,33 +21,14 @@
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-10">
|
||||
|
||||
@foreach (config('karudhaas.topic_filters') as $key => $namespace)
|
||||
<div
|
||||
class="relative flex items-center w-full px-2 transition-all duration-200 transform mini-card lg:max-w-md first:ml-4 last:pr-6 hover:-translate-y-4">
|
||||
<div class="flex flex-col h-full overflow-hidden bg-white border-2 border-{{$namespace['color']}}-500 rounded-lg w-full">
|
||||
<div class="flex justify-center px-4 pt-4">
|
||||
<div class="flex flex-wrap items-center -mb-2">
|
||||
<a href="{{route('namespaces.show', $key)}}"
|
||||
class="MvAamu inline-block text-md tracking-wide py-2 px-12 bg-{{$namespace['color']}}-500 text-white rounded-md mr-2 mb-2 transform transition-all duration-100 ease-in-out hover:bg-orange-50 border-2 border-gray-100 hover:border-{{$namespace['color']}}-500 hover:text-{{$namespace['color']}}-700"
|
||||
style="font-weight: 100;">{{$namespace['dv_name']}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{route('namespaces.show', $key)}}" class="relative block h-full px-4 py-4"
|
||||
style="min-height:auto;">
|
||||
<div class="leading-7 ">
|
||||
<p class="MvTyper text-center" style="direction: rtl;">{{$namespace['description']}}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<x-namespace-component
|
||||
:color="$namespace['color']"
|
||||
:name="$namespace['dv_name']"
|
||||
:key="$key"
|
||||
:description="$namespace['description']"
|
||||
></x-namespace-component>
|
||||
@endforeach
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@endsection
|
@@ -1,7 +1,7 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<topic-filter topics="{{implode(',',$namespace['keys']) }}" label="{{$namespace['dv_name']}}" :per_page="12"
|
||||
color="border-{{$namespace['color']}}-500">
|
||||
<topic-filter topics="{{implode(',',$namespace['keys']) }}"
|
||||
label="{{$namespace['dv_name']}}" :per_page="12" color="border-{{$namespace['color']}}-500">
|
||||
</topic-filter>
|
||||
@endsection
|
Reference in New Issue
Block a user