diff --git a/components/table-view/Component.php b/components/table-view/Component.php new file mode 100644 index 0000000..7f29592 --- /dev/null +++ b/components/table-view/Component.php @@ -0,0 +1,46 @@ +rowTitle = $rowTitle; + $this->columns = $columns; + $this->link = $link; + } + + + /** + * Get the view / contents that represent the component. + */ + public function render(): View|Closure|string + { + return view('components.table-view'); + } +} diff --git a/components/table-view/style.scss b/components/table-view/style.scss new file mode 100644 index 0000000..f9c46ad --- /dev/null +++ b/components/table-view/style.scss @@ -0,0 +1,75 @@ +.list-item { + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + padding: 1.5rem 8.5277777778% 1.5rem 0; + position: relative; + width: 100%; + border-bottom: 0.1rem solid rgba(33, 34, 54, .1); + + &__title { + color: #212236; + font-family: false semibold, Helvetica, Arial, sans-serif; + font-size: 1.25rem; + font-style: normal; + font-weight: 600; + min-width: 57.3611111111%; + width: 50%; + } + + &__infos { + align-items: center; + display: flex; + flex: 1; + flex-shrink: 0; + flex-wrap: wrap; + gap: 1rem; + justify-content: space-between; + min-width: 300px; + } + + &__info { + color: rgba(33, 34, 54, .5); + flex-shrink: 0; + font-family: IBM Plex Mono, Helvetica, Arial, sans-serif; + font-size: .75rem; + font-style: normal; + font-weight: 400; + text-transform: uppercase; + } + &__link{ + bottom: 0; + left: 0; + position: absolute; + right: 0; + text-indent: -999999px; + top: 0; + z-index: 1; + } + &__icon{ + background-color: #fff; + border-radius: 100vw; + box-shadow: inset 0 0 0 1px #f1f1f2; + display: block; + height: 2.75rem; + margin-left: auto; + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + transition: all .2s cubic-bezier(.25,.46,.45,.94); + width: 2.75rem; + + &:after{ + align-items: center; + content: url("../../icons/arrow-right.svg"); + scale: 30%; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + line-height: 1; + } + } +} diff --git a/components/table-view/view.blade.php b/components/table-view/view.blade.php new file mode 100644 index 0000000..2e11f14 --- /dev/null +++ b/components/table-view/view.blade.php @@ -0,0 +1,12 @@ +
+

+ {{ $rowTitle }} +

+
+ @foreach($columns as $column) +
{{ $column }}
+ @endforeach +
+ Voir la ressource + +
diff --git a/src/Components/Publishers/TableView.php b/src/Components/Publishers/TableView.php new file mode 100644 index 0000000..5b3d5d6 --- /dev/null +++ b/src/Components/Publishers/TableView.php @@ -0,0 +1,51 @@ +`"; + } +}