Laracasts Profile: yaqoob

yaqoob_01 liked a comment+100 XP

3d ago

@swdgroup You can reverse the process from final code… This is it:

<script setup>
</script>

<template>
  <header class="flex justify-between">
    <div>
      <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded disabled:bg-gray-400" :disabled="true">Add Member (0 Spots Left)</button>
    </div>
    <div>
      <div class="inline-flex items-center text-3xl relative">
        <img src="/smiley.png" alt="" class="mr-2">
        <h3>Smiley Team</h3>
        <div class="bg-green-400 w-5 h-5 text-xs text-white rounded-full flex justify-center items-center absolute -right-4 -top-2">5</div>
      </div>
    </div>
  </header>

  <div class="place-self-center flex flex-col gap-y-3">
    <table class="table-fixed border-spacing-2 border-separate">
      <thead>
        <th class="text-left px-6 py-2">Name</th>
        <th class="text-left px-6 py-2">Email</th>
        <th class="text-left px-6 py-2">Status</th>
      </thead>
        <tbody>
          <tr class="bg-gray-100 px-12">
            <td class="text-xl font-medium flex items-center gap-x-4 px-6 py-4">
              <img src="https://i.pravatar.cc/[email protected]" alt="" class="rounded-full">
              John Doe
            </td>
            <td class="text-gray-500 px-6 py-4">[email protected]</td>
            <td class="px-6 py-4">
              <button class="text-green-400 text-xl">Active</button>
            </td>
          </tr>

          <tr class="bg-gray-100 px-12">
            <td class="text-xl font-medium flex items-center gap-x-4 px-6 py-4">
              <img src="https://i.pravatar.cc/[email protected]" alt="" class="rounded-full">
              Sarah Doe
            </td>
            <td class="text-gray-500 px-6 py-4">[email protected]</td>
            <td class="px-6 py-4">
              <button class="text-green-400 text-xl">Active</button>
            </td>
          </tr>

          <tr class="bg-gray-100 px-12">
            <td class="text-xl font-medium flex items-center gap-x-4 px-6 py-4">
              <img src="https://i.pravatar.cc/[email protected]" alt="" class="rounded-full">
              Steven Doe
            </td>
            <td class="text-gray-500 px-6 py-4">[email protected]</td>
            <td class="px-6 py-4">
              <button class="text-green-400 text-xl">Active</button>
            </td>
          </tr>

          <tr class="bg-gray-100 px-12">
            <td class="text-xl font-medium flex items-center gap-x-4 px-6 py-4">
              <img src="https://i.pravatar.cc/[email protected]" alt="" class="rounded-full">
              Jen Doe
            </td>
            <td class="text-gray-500 px-6 py-4">[email protected]</td>
            <td class="px-6 py-4">
              <button class="text-green-400 text-xl">Active</button>
            </td>
          </tr>

          <tr class="bg-gray-100 px-12">
            <td class="text-xl font-medium flex items-center gap-x-4 px-6 py-4">
              <img src="https://i.pravatar.cc/[email protected]" alt="" class="rounded-full">
              Joe Doe
            </td>
            <td class="text-gray-500 px-6 py-4">[email protected]</td>
            <td class="px-6 py-4">
              <button class="text-green-400 text-xl">Active</button>
            </td>
          </tr>

        </tbody>
      </table>
      <p class="text-right text-gray-600 italic">There are no remaining team spots. Upgrade to add more.</p>
  </div>
  <footer class="mt-12 bg-gray-100 py-4 text-center">
    <h5 class="font-semibold text-lg">Smiley - 5 Member Team</h5>
  </footer>
</template>

yaqoob_01 wrote a comment+100 XP

3w ago

@OsamaElnagar hahaha, same

yaqoob_01 liked a comment+100 XP

1mo ago

I find it amazing you have the patience to teach things at this level when you yourself are so much ahead of it. It shows a true desire to teach. Thank you for sharing your wisdom with such selflessness.

yaqoob_01 wrote a comment+100 XP

2mos ago

Hey J.W, thank you for this amazing series! Before starting it, I had almost zero confidence with Laravel, but after going through the course, I feel much more confident and capable of working on large-scale Laravel projects. Really appreciate the effort you put into teaching — it’s truly life-changing for learners like me ❤️

yaqoob_01 wrote a comment+100 XP

2mos ago

Hey @yoeriboven, if you need it, just let me know. I can share mine. I followed the entire series. There might be a few small differences, but overall it should be the same...

yaqoob_01 liked a comment+100 XP

2mos ago

@mrrobotoh Sorry about this! All fixed now.

yaqoob_01 wrote a comment+100 XP

2mos ago

icons/close.blade.php

<svg {{ $attributes }} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Close">
  <path d="M18 6 6 18"></path>
  <path d="m6 6 12 12"></path>
</svg>

yaqoob_01 wrote a comment+100 XP

2mos ago

external.blade.php

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
    class="lucide lucide-external-link-icon lucide-external-link">
    <path d="M15 3h6v6" />
    <path d="M10 14 21 3" />
    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
</svg>

yaqoob_01 wrote a comment+100 XP

2mos ago

arrow-back.blade.php

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
    class="lucide lucide-arrow-left-icon lucide-arrow-left">
    <path d="m12 19-7-7 7-7" />
    <path d="M19 12H5" />
</svg>

yaqoob_01 liked a comment+100 XP

2mos ago

Color theme for those looking to copy:

    --color-background: oklch(0.12 0 0);
    --color-foreground: oklch(0.95 0 0);
    --color-card: oklch(0.16 0 0);
    --color-primary: oklch(0.65 0.15 160);
    --color-primary-foreground: oklch(0.12 0 0);
    --color-border: oklch(0.24 0 0);
    --color-input: oklch(0.24 0 0);
    --color-muted-foreground: oklch(0.6 0 0);

yaqoob_01 liked a comment+100 XP

2mos ago

Here are the full CSS component files for those looking to copy:

resources/css/components/btn.css

button {
    cursor: pointer;
}

.btn {
    background: var(--color-primary);
    border-radius: var(--radius-xl);
    color: var(--color-primary-foreground);
    padding-inline: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    height: calc(var(--spacing) * 8);
    line-height: calc(var(--spacing) * 8);
    display: inline-block;
}

.btn.btn-outlined {
    background: transparent;
    border: 1px solid var(--color-border);
    border-color: var(--color-border);
    color: var(--color-foreground);
}

.btn.btn-outlined:hover {
    background: color-mix(in srgb, black 25%, var(--color-input));
}

.btn.btn-ghost {
    background: transparent;
}

.btn:has(> svg) {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 2);
}

.btn:hover {
    background: color-mix(in srgb, black 10%, var(--color-primary));
    text-decoration: none;
}

resources/css/components/form.css

label {
    color: var(--color-foreground);
}

.input {
    border-radius: var(--radius-md);
    height: calc(var(--spacing) * 10);
    width: 100%;
    border-width: 1px;
    border-color: var(--color-border);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    background-color: var(--color-card);
    color: var(--color-foreground);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.input::placeholder {
    color: var(--color-muted-foreground);
}

.input:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 calc(var(--spacing) * .5) var(--color-background)
        0 0 0 calc(var(--spacing) * 1) var(--color-primary);
}

@media (min-width: var(--breakpoint-md)) {
    .input {
        font-size: var(--text-sm);
    }
}

.textarea {
    border-radius: var(--radius-md);
    height: calc(var(--spacing) * 40);
    width: 100%;
    border-width: 1px;
    border-color: var(--color-border);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    background-color: var(--color-card);
    color: var(--color-foreground);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.textarea::placeholder {
    color: var(--color-muted-foreground);
}

.textarea:focus-visible {
    outline: 0;
    box-shadow:
        0 0 0 calc(var(--spacing) * .5) var(--color-background)
        0 0 0 calc(var(--spacing) * 1) var(--color-primary);
}

.label {
    display: block;
    font-size: var(--text-sm);
}

input[type=file] {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-foreground);
}

input[type=file]::file-selector-button {
    margin-right: calc(var(--spacing) * 4);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    border-radius: calc(var(--spacing) * 2);
    border-width: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    background-color: var(--color-primary);
    color: rgb(var(--color-background));
}

input[type=file]::file-selector-button:hover {
    opacity: 0.9;
}

.error {
    font-size: var(--text-sm);
    color: var(--color-red-600);
}

.form-muted-icon {
    color: var(--color-muted-foreground);
}

.form-muted-icon:hover {
    color: var(--color-foreground);
}

yaqoob_01 liked a comment+100 XP

2mos ago

@nosthas

<?php

declare(strict_types=1);

use Rector\Config\RectorConfig;
use Rector\TypeDeclaration\Rector\ArrowFunction\AddArrowFunctionReturnTypeRector;
use Rector\TypeDeclaration\Rector\ClassMethod\ReturnTypeFromStrictTypedCallRector;
use Rector\TypeDeclaration\Rector\ClassMethod\ReturnUnionTypeRector;
use Rector\TypeDeclaration\Rector\Closure\AddClosureVoidReturnTypeWhereNoReturnRector;
use Rector\TypeDeclaration\Rector\StmtsAwareInterface\DeclareStrictTypesRector;
use RectorLaravel\Set\LaravelSetProvider;

return RectorConfig::configure()
    ->withPaths([
        __DIR__.'/app',
        __DIR__.'/bootstrap',
        __DIR__.'/config',
        __DIR__.'/public',
        __DIR__.'/resources',
        __DIR__.'/routes',
        __DIR__.'/tests',
    ])
    ->withSkip([
        __DIR__.'/bootstrap/cache',
        __DIR__.'/storage',
        __DIR__.'/vendor',
        AddClosureVoidReturnTypeWhereNoReturnRector::class,
        ReturnTypeFromStrictTypedCallRector::class,
        ReturnUnionTypeRector::class,
        DeclareStrictTypesRector::class => [
            __DIR__.'/resources/views',
        ],
        AddArrowFunctionReturnTypeRector::class,
    ])
    ->withPhpSets()
    ->withSetProviders(LaravelSetProvider::class)
    ->withImportNames()
    ->withComposerBased(laravel: true)
    ->withPreparedSets(
        deadCode: true,
        codeQuality: true,
        typeDeclarations: true,
        privatization: true,
        earlyReturn: true,
    )
    ->withRules([
        DeclareStrictTypesRector::class,
    ]);

Laravel Architect

Community Pillar

Top 50

Laracasts Sensei

Laracasts Tutor

Laracasts Master

Ten Thousand Strong

Laracasts Veteran

Chatterbox

1 Year Member

Welcome To The Community

Laracasts Evangelist

Lifer

Subscriber

Pay It Forward

Full Time Learner

Start Your Engines

School In Session

First Thousand