search-illustration.tsx

TLDR

This file is a React component called SearchIllustration that renders an SVG illustration of a search icon. It is used to display a search icon in the UI.

Classes

SearchIllustration

This class is a React component that renders an SVG illustration of a search icon. It is used as a visual representation of the search functionality in the UI.

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react'

export default function SearchIllustration(): JSX.Element {
    return (
        <span>
            <svg
                width='160'
                height='160'
                viewBox='0 0 211 211'
                fill='none'
                xmlns='http://www.w3.org/2000/svg'
            >
                <path
                    opacity='0.5'
                    d='M30.7386 30.5387C41.9645 19.17 56.1326 13.3142 73.2142 13C89.9817 13.3142 104.064 19.1414 115.461 30.5387C126.83 41.936 132.686 56.0183 133 72.7858C132.686 89.8674 126.859 104.007 115.461 115.261C104.064 126.487 89.9817 132.429 73.2142 133C56.1326 132.4 41.9931 126.487 30.7386 115.261C19.5127 104.007 13.5999 89.8389 13 72.7572C13.5999 55.9898 19.5127 41.9074 30.7386 30.5387Z'
                    fill='#F4F4F6'
                />
                <path
                    d='M146.832 68.1304C145.633 50.4091 138.441 34.8462 125.285 21.4416C110.302 7.15667 93.0078 0 73.4017 0C53.7956 0 36.5296 7.15667 21.5468 21.4416C7.19177 36.3513 0 53.533 0 73.0435C0 92.5539 7.19177 109.764 21.5468 124.645C35.3024 137.766 51.0273 144.837 68.6928 145.86C86.3583 146.911 102.654 142.054 117.637 131.348L128.852 142.509L143.207 128.224L131.992 117.063C143.065 102.181 148.002 85.8516 146.832 68.1304ZM115.839 115.046C104.452 126.207 90.3822 132.114 73.63 132.682C56.5638 132.086 42.4371 126.207 31.1929 115.046C19.9771 103.885 14.0696 89.7992 13.4703 72.8163C14.0696 56.1458 19.9771 42.1448 31.1929 30.8134C42.4086 19.5104 56.5638 13.6886 73.63 13.3762C90.3822 13.6886 104.452 19.482 115.839 30.8134C127.197 42.1448 133.048 56.1458 133.362 72.8163C133.048 89.7992 127.226 103.885 115.839 115.046Z'
                    fill='#BABEC9'
                />
                <path
                    d='M32.8537 108.595C45.1718 120.134 59.2946 125.918 75.2222 125.918C91.1498 125.918 105.273 120.134 117.591 108.595C124.208 102.077 128.992 94.685 132 86.39C129.594 97.3371 124.179 107.099 115.786 115.676C103.468 127.216 89.2591 133 73.1883 133C57.1175 133 42.9087 127.216 30.5906 115.676C22.1685 107.099 16.7543 97.3371 14.3766 86.39C11.9703 75.4429 12.7151 64.6368 16.6397 54C14.5485 63.48 14.8349 73.0164 17.5277 82.6375C20.2492 92.2586 25.3483 100.892 32.8537 108.595Z'
                    fill='#A4A9B7'
                />
                <path
                    d='M192.739 210.413C189.038 211.471 186.297 211.099 184.517 209.298L126.291 145.395C124.511 143.594 123.776 141.278 124.059 138.419C124.341 135.559 126.121 132.357 129.398 128.755C132.958 125.467 136.122 123.579 138.947 123.122C141.773 122.665 144.061 123.494 145.841 125.609L209.407 184.537C211.187 186.339 211.47 189.026 210.283 192.629C209.097 196.231 206.865 199.834 203.616 203.436C200.084 207.039 196.44 209.355 192.739 210.413Z'
                    fill='#FFBC1F'
                />
                <path
                    d='M197 173L173.197 197L144.5 165.5L165.548 144L197 173Z'
                    fill='#7A5600'
                />
            </svg>
        </span>
    )
}