disler · July 30, 2023 19:20
diff --git a/component-prompt.txt b/component-prompt.txt
 You're a Senior Vue.js Front-end Engineer that mentored directly with Evan You, creator of Vue.js.

 You have a new project that requires you to build a new component.

 The component has the following requirements:

 - Create a Carousel component with a sliding animation so that when the user clicks 'next' or 'previous' the user visually sees a swipe animation.
 - Don't use the Vue.js Transition wrapper. Instead, use the view width css property to create the animation and base the scroll position on the current index of the carousel.
 - Horizontally slide the components from 1 to 2 of 'next' is clicked and from 2 to 1 if 'previous' is clicked.
 - Within the Carousel component place 3 divs which represent 3 slides.
 - Don't use a for loop, place the divs directly in the template.
 - Each div will have 'slide N' text, a previous button, and a next button.
 - Center the text, the previous button, and the next button within each slide both vertically and horizontally.

 Use this function to navigate between pages:

 export function scrollToPage(parentElement: HTMLElement, pageIndex: number, instant = false) {

    if (!parentElement) {
        return
    }

    const scrollAmount = pageIndex * window.innerWidth

    if (parentElement) {
      parentElement.scrollTo({
        top: 0,
        left: scrollAmount,
        behavior: instant ? 'auto' : 'smooth'
      })
    }
 }

 Use the modern Vue 3 <script setup> syntax detailed in this example component:

 <template>
    <div class='(filename)-w'>
      <h1>{{ name }}</h1>
      <h2>{{ age }}</h2>
      <h2>{{ doubleAge }}</h2>
      <input type='text' :value='name' @input='updateName($event.target.value)' />
    </div>
  </template>
  
  <script lang='ts' setup>
  import { toRefs, ref, computed, onMounted } from 'vue'
  
  // ---------------------------- Props / Emit ----------------------------
  
  interface Props {
    name: string
    lastName?: string
  }
  
  const props = defineProps<Props>()
  const { name } = toRefs(props)
  
  const emit = defineEmits(['update'])
  
  // ---------------------------- State / Getters ----------------------------
  
  const age = ref(30)
  
  const doubleAge = computed(_ => age.value * 2)
  
  // ---------------------------- Methods ----------------------------
  
  function updateName(value: string) {
    emit('update', value)
  }
  
  // ---------------------------- Lifecycle Hooks ----------------------------
  
  onMounted(() => {
    console.log('mounted')
  })
  </script>
  
  <style></style>
	You're a Senior Vue.js Front-end Engineer that mentored directly with Evan You, creator of Vue.js.

	You have a new project that requires you to build a new component.

	The component has the following requirements:

	- Create a Carousel component with a sliding animation so that when the user clicks 'next' or 'previous' the user visually sees a swipe animation.
	- Don't use the Vue.js Transition wrapper. Instead, use the view width css property to create the animation and base the scroll position on the current index of the carousel.
	- Horizontally slide the components from 1 to 2 of 'next' is clicked and from 2 to 1 if 'previous' is clicked.
	- Within the Carousel component place 3 divs which represent 3 slides.
	- Don't use a for loop, place the divs directly in the template.
	- Each div will have 'slide N' text, a previous button, and a next button.
	- Center the text, the previous button, and the next button within each slide both vertically and horizontally.

	Use this function to navigate between pages:

	export function scrollToPage(parentElement: HTMLElement, pageIndex: number, instant = false) {

	if (!parentElement) {
	return
	}

	const scrollAmount = pageIndex * window.innerWidth

	if (parentElement) {
	parentElement.scrollTo({
	top: 0,
	left: scrollAmount,
	behavior: instant ? 'auto' : 'smooth'
	})
	}
	}

	Use the modern Vue 3 <script setup> syntax detailed in this example component:

	<template>
	<div class='(filename)-w'>
	<h1>{{ name }}</h1>
	<h2>{{ age }}</h2>
	<h2>{{ doubleAge }}</h2>
	<input type='text' :value='name' @input='updateName($event.target.value)' />
	</div>
	</template>

	<script lang='ts' setup>
	import { toRefs, ref, computed, onMounted } from 'vue'

	// ---------------------------- Props / Emit ----------------------------

	interface Props {
	name: string
	lastName?: string
	}

	const props = defineProps<Props>()
	const { name } = toRefs(props)

	const emit = defineEmits(['update'])

	// ---------------------------- State / Getters ----------------------------

	const age = ref(30)

	const doubleAge = computed(_ => age.value * 2)

	// ---------------------------- Methods ----------------------------

	function updateName(value: string) {
	emit('update', value)
	}

	// ---------------------------- Lifecycle Hooks ----------------------------

	onMounted(() => {
	console.log('mounted')
	})
	</script>

	<style></style>