diff --git a/.github/workflows/deploy_gh_pages.yml b/.github/workflows/deploy_gh_pages.yml
index cc2355f..96b44ca 100644
--- a/.github/workflows/deploy_gh_pages.yml
+++ b/.github/workflows/deploy_gh_pages.yml
@@ -48,4 +48,4 @@ jobs:
steps:
- name: Deploy
id: deployment
- uses: actions/deploy-pages@v2
\ No newline at end of file
+ uses: actions/deploy-pages@v2
diff --git a/README.md b/README.md
index 4dfbf6a..29d8c69 100644
--- a/README.md
+++ b/README.md
@@ -1,29 +1,26 @@
# svelte-swiper-cards
-Tinder-like swipeable cards for svelte.
+Tinder-like swipeable cards component for svelte.
-> [!NOTE]
-> Still in active development. Expect breaking changes.
-
-[Try the simple demo here!](https://flo-bit.github.io/svelte-swiper-cards/simple-demo)
+[Try the demo here!](https://flo-bit.github.io/svelte-swiper-cards)
https://github.com/flo-bit/svelte-swiper-cards/assets/45694132/61077605-b6f8-4114-aaa3-5527d8887f99
## Features
-- Built with tailwind
-- Reuses cards (only two cards, that are swapped)
-- Customizable (customize the card)
-- Modern: uses @use-gesture/vanilla for gesture handling
-- TypeScript
+- Built with **tailwind**
+- **Reuses cards** (only two cards, that are swapped)
+- **Customizable** (easily customize the card ui and data)
+- **Modern**: uses @use-gesture/vanilla for gesture handling
+- Uses **TypeScript**
## Installation
- You need to have tailwind installed in your project, see [here for installation instructions](https://tailwindcss.com/docs/guides/sveltekit).
-- Copy the `CardSwiper` folder from `src/libs` to your projects `lib` folder.
+- Download the [`CardSwiper`](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2Fflo-bit%2Fsvelte-swiper-cards%2Ftree%2Fmain%2Fsrc%2Flib%2FCardSwiper) folder from `src/libs` to your projects `src/lib` folder.
-- Install dependency
+- Install dependency `@use-gesture/vanilla`
```bash
npm i @use-gesture/vanilla
@@ -32,19 +29,21 @@ npm i @use-gesture/vanilla
## Usage
```svelte
-
-
+
```
@@ -57,37 +56,37 @@ Customize the `Card.svelte` file to your needs, if you need to pass in more data
You can control the cards programmatically by calling the swipe function.
```svelte
-
-
-
-
+
+
+
```
### Events
```svelte
-
-
+
```
@@ -99,17 +98,17 @@ Show a threshold overlay when swiping like so (set to 0 if no threshold reached,
```svelte
{#if thresholdPassed !== 0}
-
diff --git a/src/lib/CardSwiper/index.ts b/src/lib/CardSwiper/index.ts
index 87f5d05..3bffcd2 100644
--- a/src/lib/CardSwiper/index.ts
+++ b/src/lib/CardSwiper/index.ts
@@ -1,10 +1,20 @@
+/**
+ * change this to your own data structure, that each card will use
+ * then change the Card.svelte file to use your data structure
+ */
export type CardData = {
title?: string;
- color?: string;
description?: string;
image?: string;
};
+export type SwipeEventData = {
+ direction: Direction;
+ data: CardData;
+ index: number;
+ element: HTMLElement;
+};
+
export type Direction = 'left' | 'right';
export { default as CardSwiper } from './CardSwiper.svelte';
diff --git a/src/lib/Demo.svelte b/src/lib/Demo.svelte
deleted file mode 100644
index c96233c..0000000
--- a/src/lib/Demo.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/src/lib/demo/Demo.svelte b/src/lib/demo/Demo.svelte
new file mode 100644
index 0000000..e1c6073
--- /dev/null
+++ b/src/lib/demo/Demo.svelte
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+ {#if thresholdPassed !== 0}
+
+ {thresholdPassed > 0 ? '👍' : '👎'}
+
+ {/if}
+
diff --git a/src/lib/demo/PhoneMockup.svelte b/src/lib/demo/PhoneMockup.svelte
new file mode 100644
index 0000000..984f4c2
--- /dev/null
+++ b/src/lib/demo/PhoneMockup.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/lib/demo/people.json b/src/lib/demo/people.json
new file mode 100644
index 0000000..158bf58
--- /dev/null
+++ b/src/lib/demo/people.json
@@ -0,0 +1,52 @@
+[
+ {
+ "name": "Lucas",
+ "age": 40,
+ "description": "Loves to dance in the rain."
+ },
+ {
+ "name": "Benjamin",
+ "age": 28,
+ "description": "Eats pizza with a fork."
+ },
+ {
+ "name": "Noah",
+ "age": 49,
+ "description": "Talks to plants."
+ },
+ {
+ "name": "Emily",
+ "age": 45,
+ "description": "Sleeps with socks on."
+ },
+ {
+ "name": "Ava",
+ "age": 43,
+ "description": "Thinks they can speak to animals."
+ },
+ {
+ "name": "Sophia",
+ "age": 23,
+ "description": "Obsessed with organizing."
+ },
+ {
+ "name": "Charlotte",
+ "age": 41,
+ "description": "Afraid of shadows."
+ },
+ {
+ "name": "Olivia",
+ "age": 23,
+ "description": "Collects rare pebbles."
+ },
+ {
+ "name": "Isabella",
+ "age": 42,
+ "description": "Always forgets why they walked into a room."
+ },
+ {
+ "name": "Jacob",
+ "age": 24,
+ "description": "Can recite movies backwards."
+ }
+]
diff --git a/src/lib/index.ts b/src/lib/index.ts
deleted file mode 100644
index 856f2b6..0000000
--- a/src/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 44ed8d6..8814b0f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
@@ -45,36 +45,18 @@
A swipeable card component for Svelte. Swipe left or right to like or dislike a card.