Jeffrey Way JeffreyWay

## AssignmentList.js
import Assignment from "./Assignment.js";
import AssignmentTags from "./AssignmentTags.js";

export default {
    components: { Assignment, AssignmentTags },

    template: `
        <section v-show="assignments.length" class="w-60">
            <div class="flex justify-between items-start">
                <h2 class="font-bold mb-2">

## Assignments.js
import AssignmentList from "./AssignmentList.js";
import AssignmentCreate from "./AssignmentCreate.js";

export default {
    components: { AssignmentList, AssignmentCreate },

    template: `
        <section class="space-y-6">
            <assignment-list :assignments="filters.inProgress" title="In Progress"></assignment-list>
            <assignment-list :assignments="filters.completed" title="Completed"></assignment-list>

## AssignmentList.js
import Assignment from "./Assignment.js";
import AssignmentTags from "./AssignmentTags.js";

export default {
    components: { Assignment, AssignmentTags },

    template: `
        <section v-show="assignments.length">
            <h2 class="font-bold mb-2">
                {{ title }}

## index.php
<?php

class Player {
    public function __construct(public string $name, public int $pennies)
    {
        //
    }

    public function givePenny(Player $p2): void
    {

## AssignmentList.js
import Assignment from "./Assignment.js";

export default {
    components: { Assignment },

    template: `
        <section v-show="assignments.length">
            <h2 class="font-bold mb-2">
                {{ title }}
                <span>({{ assignments.length }})</span>

## App.js
import Assignments from "./Assignments.js";

export default {
    components: { Assignments },

    template: `
        <assignments></assignments>
    `,
}

## App.js
import Assignments from "./Assignments.js";

export default {
    components: { Assignments },

    template: `
        <assignments></assignments>
    `,
}

## App.js
import AppButton from "./AppButton.js";

export default {
    components: {
        'app-button': AppButton
    }
};

## AppButton.js
export default {
    template: `
        <button class="bg-gray-200 hover:bg-gray-400 border rounded px-5 py-2 disabled:cursor-not-allowed" :disabled="processing">
            <slot />
        </button>
    `,

    data() {
        return {
            processing: true

## index.html
<!doctype html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <title>Episode 4: Your First Custom Vue Component</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="h-full grid place-items-center">
	import Assignment from "./Assignment.js";
	import AssignmentTags from "./AssignmentTags.js";

	export default {
	components: { Assignment, AssignmentTags },

	template: `
	<section v-show="assignments.length" class="w-60">
	<div class="flex justify-between items-start">
	<h2 class="font-bold mb-2">
	import AssignmentList from "./AssignmentList.js";
	import AssignmentCreate from "./AssignmentCreate.js";

	export default {
	components: { AssignmentList, AssignmentCreate },

	template: `
	<section class="space-y-6">
	<assignment-list :assignments="filters.inProgress" title="In Progress"></assignment-list>
	<assignment-list :assignments="filters.completed" title="Completed"></assignment-list>
	<?php

	class Player {
	public function __construct(public string $name, public int $pennies)
	{
	//
	}

	public function givePenny(Player $p2): void
	{
	import Assignment from "./Assignment.js";

	export default {
	components: { Assignment },

	template: `
	<section v-show="assignments.length">
	<h2 class="font-bold mb-2">
	{{ title }}
	<span>({{ assignments.length }})</span>
	import Assignments from "./Assignments.js";

	export default {
	components: { Assignments },

	template: `
	<assignments></assignments>
	`,
	}
	import AppButton from "./AppButton.js";

	export default {
	components: {
	'app-button': AppButton
	}
	};
	export default {
	template: `
	<button class="bg-gray-200 hover:bg-gray-400 border rounded px-5 py-2 disabled:cursor-not-allowed" :disabled="processing">
	<slot />
	</button>
	`,

	data() {
	return {
	processing: true
	<!doctype html>
	<html lang="en" class="h-full">
	<head>
	<meta charset="UTF-8">
	<title>Episode 4: Your First Custom Vue Component</title>
	<script src="https://unpkg.com/vue@3"></script>
	<script src="https://cdn.tailwindcss.com"></script>
	</head>

	<body class="h-full grid place-items-center">