mirror of
https://github.com/ivabus/gui
synced 2025-06-07 15:50:27 +03:00
#32 make SearchInput reusable component
This commit is contained in:
neil
parent
53a9386b0a
commit
095040e74e
7 changed files with 109 additions and 13 deletions
|
|
@ -102,7 +102,7 @@
|
|||
"height": 600,
|
||||
"resizable": true,
|
||||
"title": "gui",
|
||||
"width": 800,
|
||||
"width": 1024,
|
||||
"decorations": false
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { page } from '$app/stores';
|
||||
import { open } from '@tauri-apps/api/shell';
|
||||
import { appWindow } from '@tauri-apps/api/window';
|
||||
import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
|
||||
|
||||
import { beforeUpdate } from 'svelte';
|
||||
|
||||
|
|
@ -73,11 +74,7 @@
|
|||
</a>
|
||||
</nav>
|
||||
|
||||
<input
|
||||
class="w-full bg-black h-12 p-4 border border-x-0 border-gray"
|
||||
type="search"
|
||||
placeholder="search"
|
||||
/>
|
||||
<SearchInput size="small" />
|
||||
|
||||
{#each routes as route}
|
||||
<li class={route.active ? 'nav_button active' : 'nav_button'}>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
import type { Package } from '@tea/ui/types';
|
||||
import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
|
||||
|
||||
import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let packages: Package[] = [];
|
||||
|
|
@ -23,11 +23,15 @@
|
|||
</script>
|
||||
|
||||
<div class="bg-black border border-gray">
|
||||
<section class="flex">
|
||||
<h2>Filter Packages</h2>
|
||||
<input type="search" class="text-white bg-black border border-gray" />
|
||||
<section class="flex justify-between items-center">
|
||||
<div>
|
||||
<SearchInput size="medium" />
|
||||
</div>
|
||||
<div class="pr-4">
|
||||
<section class="h-12 w-48 border border-gray" />
|
||||
</div>
|
||||
</section>
|
||||
<ul class="grid grid-cols-3 mt-8">
|
||||
<ul class="grid grid-cols-3">
|
||||
{#each packages as pkg}
|
||||
<PackageCard {pkg} link={`/packages/${pkg.full_name}`} />
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
{/if}
|
||||
</article>
|
||||
</figure>
|
||||
<footer class="flex mt-4 justify-between">
|
||||
<footer class="flex mt-4 justify-between items-center">
|
||||
<div>
|
||||
<p>
|
||||
<span>V {pkg.version}</span>
|
||||
|
|
@ -33,6 +33,7 @@
|
|||
<span class="package-install-no">>{{- .installs -}} installs</span> -->
|
||||
</p>
|
||||
</div>
|
||||
<!-- TODO: move this button into its own reusable component -->
|
||||
<a href={link}>
|
||||
<button class="detail-btn"><i class="icon-enter-arrow" />details</button>
|
||||
</a>
|
||||
|
|
@ -101,7 +102,7 @@
|
|||
padding-top: 0.279vw;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
width: 134px;
|
||||
width: 100px;
|
||||
height: 2.232vw;
|
||||
min-height: 34px;
|
||||
transition: 0.1s linear;
|
||||
|
|
|
|||
1
packages/ui/src/SearchInput/SearchInput.css
Normal file
1
packages/ui/src/SearchInput/SearchInput.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import '../app.css';
|
||||
31
packages/ui/src/SearchInput/SearchInput.stories.ts
Normal file
31
packages/ui/src/SearchInput/SearchInput.stories.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import SearchInput from './SearchInput.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Example/SearchInput',
|
||||
component: SearchInput,
|
||||
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/svelte/writing-docs/docs-page
|
||||
tags: [],
|
||||
render: (args) => ({
|
||||
Component: SearchInput,
|
||||
props: args
|
||||
}),
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
|
||||
// layout: 'fullscreen'
|
||||
},
|
||||
argTypes: {
|
||||
// onLogin: { action: 'onLogin' },
|
||||
// onLogout: { action: 'onLogout' },
|
||||
// onCreateAccount: { action: 'onCreateAccount' }
|
||||
}
|
||||
};
|
||||
|
||||
export const Small = {
|
||||
args: {
|
||||
user: {
|
||||
name: 'Jane Doe'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const Big = {};
|
||||
62
packages/ui/src/SearchInput/SearchInput.svelte
Normal file
62
packages/ui/src/SearchInput/SearchInput.svelte
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<script type="ts">
|
||||
import './SearchInput.css';
|
||||
|
||||
export let size: 'small' | 'medium' | 'large' = 'small';
|
||||
</script>
|
||||
|
||||
<section class={`flex items-center ${size}`}>
|
||||
<div class="icon">
|
||||
<i class="icon-search-icon" />
|
||||
</div>
|
||||
<input type="search" placeholder="search_" />
|
||||
</section>
|
||||
|
||||
<!-- <input type="search" class="w-full bg-black h-12 p-4 border border-x-0 border-gray"/> -->
|
||||
<style>
|
||||
.icon-search-icon {
|
||||
font-size: 30px;
|
||||
color: #949494;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
section.medium {
|
||||
height: 75px;
|
||||
}
|
||||
section.large {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
section input {
|
||||
font-family: 'pp-neue-machina', sans-serif;
|
||||
color: #00ffd0;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: -5px;
|
||||
min-width: 60%;
|
||||
padding: 0px;
|
||||
background-color: #1a1a1a !important;
|
||||
border: none;
|
||||
color: #00ffd0;
|
||||
outline: none;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
section.medium input {
|
||||
font-size: 24px;
|
||||
}
|
||||
section.large input {
|
||||
font-size: 32px;
|
||||
}
|
||||
section input::placeholder {
|
||||
/* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: #949494;
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue